datagrid|web| control This article is the third in a series about using the DataGrid Web Control article. The ASP.net DataGrid Web control displays database information in an HTML table and is powerful. In the first article we discussed the basic functions of a DataGrid; In the second article we discussed setting the DataGrid Display Properties. This article will examine how to relate events to the DataGrid.
Introduction
In the first article we studied the basic function of a DataGrid (a ASP.net Web control designed to display data in HTML table tags), showing how simple it is to display the contents of a database through a asp.net page. In the second article, we studied how to customize the display of the DataGrid. As seen in the previous demo (demo), we can display database information in an impressive format with very little program code.
While displaying data is very effective, it is really useful to be able to associate some form of action with a DataGrid. For example, imagine that you are working for an E-commerce company and are required to display all order information through the DataGrid. Each order contains a lot of relevant data, including the Order of goods, order time, the buyer's information (name, address, etc.), the buyer's choice of delivery methods. Displaying all this information in a DataGrid (for each order) will result in an excessive display of information.
As seen in the DataGrid Web Control Depth Adventure (2), we can specify the columns that need to be displayed by setting the AutoGenerateColumns property to false and then through the Columns property. While this makes the data easy to understand, what if the user wants to be able to see the complex details of any order? Ideally we would like to have a button labeled detail on each row of the DataGrid, and when clicked this button will display all the information about the order.
The example in this article will lead the reader to create a very similar application. In the previous demo we showed the 10 most popular FAQ for aspfaqs.com. This article expands the presentation to show the most critical information for 10 common problems, with each row containing a detail button.
Build the Foundation
We mentioned in the second article that the DataGrid control allows some BoundColumn tags to be placed in the columns tag of the DataGrid. Recall that each BoundColumn tag represents a column in the DataGrid. In order to place the button in the DataGrid, we can use the ButtonColumn tag, which is similar to the use of the BoundColumn tag. The following code shows how to place a button in a DataGrid:
<form runat= "Server" >
<asp:datagrid runat= "Server" id= "Dgpopularfaqs"
Backcolor= "#eeeeee" width= "85%"
Horizontalalign= "Center"
Font-name= "Verdana" cellpadding= "4"
Font-size= "10pt" autogeneratecolumns= "False" >
horizontalalign= "Center"/>
<alternatingitemstyle backcolor= "White"/>
<Columns>
<asp:buttoncolumn text= "Details" headertext= "FAQ details"/>
<asp:boundcolumn datafield= "faqid" visible= "False"/>
<asp:boundcolumn datafield= "Description" headertext= "FAQ Description"/>
</Columns>
</asp:datagrid>
</form>
The results of the sample run are as follows:
DataGrid that contains buttons
This example displays a DataGrid Web control that contains the detail button. button is displayed as a link, and if you want the link to be a standard button, you need to enter Buttontype= "Pushbutton" in the buttoncolumn tag.
FAQ Details
FAQ ID
FAQ Description
Details
144
Where can I host my ASP Web site for free (similar to GeoCities or Tripod or any of the many, other free WEB site sites)?
Details
181
How can I format numbers and date/times using asp.net? For example, I want to format a number as a currency.
...
Source:
<% @Import namespace= "System.Data"%>
<% @Import namespace= "System.Data.SqlClient"%>
<script language= "VB" runat= "Server" >
Sub Page_Load (sender as Object, E as EventArgs)
Binddata ()
End Sub
Sub Binddata ()
' 1. Create a connection
Dim MyConnection as New SqlConnection (ConfigurationSettings.AppSettings ("connectionString"))
' 2. Create the Command object, passing in the SQL string
Const strSQL as String = "Sp_popularity"
Dim mycommand as New SqlCommand (strSQL, MyConnection)
' Set the DataGrid ' s DataSource to the DataReader and DataBind
Myconnection.open ()
Dgpopularfaqs.datasource = Mycommand.executereader (commandbehavior.closeconnection)
Dgpopularfaqs.databind ()
End Sub
</script>
<form runat= "Server" >
<asp:datagrid runat= "Server" id= "Dgpopularfaqs"
Backcolor= "#eeeeee" width= "85%"
Horizontalalign= "Center"
Font-name= "Verdana" cellpadding= "4"
Font-size= "10pt" autogeneratecolumns= "False" >
<alternatingitemstyle backcolor= "White"/>
<Columns>
<asp:buttoncolumn text= "Details" headertext= "FAQ details"/>
<asp:boundcolumn datafield= "faqid" headertext= "FAQ ID"/>
<asp:boundcolumn datafield= "Description" headertext= "FAQ Description"/>
</Columns>
</asp:datagrid>
</form>
Note that for the example to work, you need to place the DataGrid on a server-side table consignments (as shown in bold <form runat= "Server" >). This is because in order to track the clicked button and the associated action that should occur, ASP. NET page should be able to recreate a series of buttons in the page and in the DataGrid. To do this, you need to use the status information (ViewState) of the page. The discussion of state information is beyond the scope of this article; For more information, read: Form Viewstate.
Note the button created in the example is a text link button. This is the default appearance generated by the ButtonColumn class. If you want to display a standard button, you can specify buttontype= "Pushbutton" in the buttoncolumn tag. The ButtonColumn class contains some important properties. Two formatting attributes are used in the above code. The HeaderText property specifies the text in the header of the column that contains the button in the DataGrid. The Text property specifies the textual display of each button. Similar to the BoundColumn tag, The ButtonColumn tag can set the text of each button to the value of a column in the DataSource property of the DataGrid-omit the Text property from the ButtonColumn class and set the DataTextField property to the name of a column in the database. The value of the column is used as the text of the button.
