|
Click here to return to my article index
In this article, we will tackle one of the common questions over at the ASPAlliance Lists -
"How do I add content to the footer in a DataGrid?". The code required to achieve this nifty functionality is relatively
simple.
The code sample below uses a few best pratices you should understand and be aware of:
*The code below uses structured error handling techniques in the form of the Try...Catch statement. Go here
to read more about the great new structured error handling we VBers now have.
*The code below also uses a connection string stored in a web.config configuration file. Go here to read more about
the web.config configuration file and how it can be used to store application wide data.
*The code below also follows proper database resouce management per this best practice.
First, we will create a Page_Load event. In our Page_Load event, we will connect to the pubs database
using the connection and command objects. Once connected to the pubs database, we will retrieve addresses and their
accompanying cities from the Authors table. The resulting DataReader (returned from the ExecuteReader method) will then
be bound to our DataGrid.
<%@ Page Language="VB" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<script runat="server">
Sub Page_Load(Sender As Object, E As EventArgs)
Dim myConnection As SqlConnection = new SqlConnection(ConfigurationSettings.AppSettings("DSN_pubs"))
Dim myCommand As SqlCommand = New SqlCommand("select address, city from Authors", myConnection)
Dim myDataReader As SqlDataReader
Try
myConnection.Open()
myDataReader = myCommand.ExecuteReader(CommandBehavior.CloseConnection)
myDataGrid.DataSource = myDataReader
myDataGrid.DataBind()
Catch myException As Exception
Response.Write("An error has occurred: " & myException.ToString())
Finally
If Not myDataReader Is Nothing Then
myDataReader.Close()
End If
End Try
End Sub
Next, we will create the OnItemDataBound event;where all the action takes place. In the example, the OnItemDataBound event
is called myDataGrid_ItemDataBound. In our OnItemDataBound event, we can examine each row of the DataGrid as it
is bound with data. In this example, we only want to modify the footer of the DataGrid. So, we need to test the ItemType
property of each row. The following table represents the eight ItemTypes that can be found in a DataGrid:
| Item Type |
Description |
| Header |
The heading section of the DataGrid control. |
| Footer |
The footer section of the DataGrid control. |
| Item |
An item in the DataGrid control. |
| AlternatingItem |
An alternating item in the DataGrid control. |
| SelectedItem |
The selected item in the DataGrid control. |
| EditItem |
The item selected for editing in the DataGrid control. |
| Separator |
A separator between the items of the DataGrid control. |
| Pager |
The page selection section of the DataGrid control. |
Once we have determined that the current row is the footer, we can begin adding our dynamic content. In our example,
we create a hyperlink and add it to second column of our DataGrid.
Public Sub myDataGrid_ItemDataBound(sender As Object, e As DataGridItemEventArgs)
'Only perform this code if we are looking at the footer
If(e.Item.ItemType = ListItemType.Footer )
Dim myHyperLink As HyperLink = new HyperLink()
'This traps an error if no id is present in the QueryString
If Not Request.QueryString("id") = Nothing Then
myHyperLink.Text = "Add Detail"
myHyperLink.NavigateURL = "adddetail.aspx?id=" & Request.QueryString("id")
Else
myHyperLink.Text = "Cannot Add Detail"
End If
'Cells is Zero Based
'1 is the column number where we want to add the hyperlink
e.Item.Cells(1).Controls.Add(myHyperLink)
End If
End Sub
</script>
Finally, we have the HTML/Server Control code that represents the page. Notice that we "hook up" the OnItemDataBound
in our DataGrid declaration to our myDataGrid_ItemDatabound event in the code in our <script> block. We also
set the ShowFooter property of the DataGrid to true. This tells the DataGrid that we need to dispaly a footer.
<html>
<head>
</head>
<body>
<form runat="server">
<asp:datagrid id="myDataGrid"
runat="server"
showfooter="true"
onitemdatabound="myDataGrid_ItemDataBound"
enableviewstate="false">
</asp:datagrid>
</form>
</body>
</html>
Click here to see the example in action!
Click here to see the full source!
Related Articles:
Creating a simple custom DataGrid
Hiding columns in a DataGrid
How to add a confirmation popup to a DataGrid
| 
