| |
Displaying Column Summary Information in the Footer
| For More Information... | |
For more information on this FAQ, check out the following resources:
|
Oftentimes when examining data, you are more interested in a summary of the data. For example, when pouring over your credit card
bill, you are more interested in the total due than the amount of each purchase. Imagine that you worked for a credit card company
and were tasked with building a DataGrid that showed a customer's current transactions and the amount for each transaction. Clearly,
in addition to this itemized list of transactions, you'd also want to show the total due.
First, let's look at a simple ASP.NET Web page that lists each the itemized transactions, without yet worrying about summary data.
As can be seen in the live demo, the following DataGrid declaration can be used
to produce an itemized credit card bill:
|
<![CDATA[
<asp:DataGrid runat="server" id="dgBill" AutoGenerateColumns="False"
Font-Name="Verdana" Font-Size="10pt" CellPadding="4"
AlternatingItemStyle-BackColor="#eeeeee">
<HeaderStyle BackColor="Navy" ForeColor="White"
Font-Size="14pt" Font-Bold="True" HorizontalAlign="Center" />
<Columns>
<asp:BoundColumn DataField="Description" HeaderText="Description" />
<asp:BoundColumn DataField="DatePurchased" HeaderText="Date"
DataFormatString="{0:d}" />
<asp:BoundColumn DataField="Price" HeaderText="Price"
DataFormatString="{0:c}"
ItemStyle-HorizontalAlign="Right" />
</Columns>
</asp:DataGrid>
]]>
|
This page, as you can see in the live demo, binds a DataSource to the DataGrid
that has three columns: Description, a string column that explains the purchased item; DatePurchased, a
date/time column value that signifies when the purchase was made; and Price, which indicates the price of the item
purchased.
|
Date/Time and Currency Formatting |
Notice that the DataGrid declaration above uses the BoundColumn's DataFormatString property to format the
DatePurchased and Price fields as just a date (as opposed to a date and time) and as a currency,
respectively. For more information on formatting DataSource field values, be sure to check out
the FAQs Formatting Numeric Data and
Formatting Date and Time Data.
|
Adding Summary Information
Now that we have a DataGrid that displays the individual items of the credit card bill, we're ready to examine how to add summary
information and have it display in the DataGrid's footer. First, in order to have the DataGrid display a footer you need to set the
DataGrid's ShowFooter property to True. (This can be done in the DataGrid declaration.)
Next, we need to be able to sum up the value of the Price field for each DataGrid row. The DataGrid has a
ItemDataBound event that fires once for every added DataGrid row, immediately after the DataSource row
has been bound to the DataGrid row.
To accomplish this, we can use the following DataGrid declaration:
|
<![CDATA[
<asp:DataGrid runat="server" id="dgBill" AutoGenerateColumns="False"
Font-Name="Verdana" Font-Size="10pt" CellPadding="4"
AlternatingItemStyle-BackColor="#eeeeee"
OnItemDataBound="KeepRunningSum"
ShowFooter="True">
<HeaderStyle BackColor="Navy" ForeColor="White"
Font-Size="14pt" Font-Bold="True" HorizontalAlign="Center" />
<FooterStyle BackColor="#CCCCCC" />
<Columns>
<asp:BoundColumn DataField="Description" HeaderText="Description" />
<asp:BoundColumn DataField="DatePurchased" HeaderText="Date"
DataFormatString="{0:d}" />
<asp:BoundColumn DataField="Price" HeaderText="Price"
DataFormatString="{0:c}"
ItemStyle-HorizontalAlign="Right" />
</Columns>
</asp:DataGrid>
]]>
|
Note that this DataGrid declaration differs from the first one we examined only in that its ShowFooter is set to True
and its ItemDataBound event is wired up to an event handler titled KeepRunningSum. Now all that is left
to do is to create the KeepRunningSum event handler. In this event handler we can determine the value of the
Price column and add its value to the value of a running sum. To accomplish this we need to create a variable to hold
the value of the running sum. The complete code to accomplish this can be seen below (in both C# and VB.NET syntax):
|
<![CDATA[
Dim runningSum as Single = 0.0
Sub KeepRunningSum(sender As Object, e As DataGridItemEventArgs)
If e.Item.ItemType = ListItemType.Item OR _
e.Item.ItemType = ListItemType.AlternatingItem then
runningSum += Convert.ToSingle(DataBinder.Eval(e.Item.DataItem, "Price"))
ElseIf e.Item.ItemType = ListItemType.Footer then
e.Item.Cells(2).Text = "<b>Total:</b> " & String.Format("{0:c}", runningSum)
End If
End Sub
]]>
| | VB.NET |
|
<![CDATA[
Single runningSum = 0.0;
void KeepRunningSum(object sender, DataGridItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem)
runningSum += Convert.ToSingle(DataBinder.Eval(e.Item.DataItem, "Price"));
else if (e.Item.ItemType == ListItemType.Footer)
e.Item.Cells[2].Text = "<b>Total:</b> " + String.Format("{0:c}", runningSum);
}
]]>
| | C# |
The thing to note in these two code samples is the following: the KeepRunningSum event handler fires once for each
row that is added to the DataGrid, after it has been bound to its DataSource row. We can extract the DataSource
row from the DataGridItem's DataItem property (as we do in e.Item.DataItem in the DataBinder.Eval()
method). This event handler fires for all created DataGrid rows, including the footer. You can determine what type of row is
being created by the ItemType property. Hence, in this event handler we check to see if the row being added is an
Item or AlternatingItem - if it is, we add the Price column value to the runningSum
variable; if, on the other hand, it is the footer, we display the value of the runningSum, formatting it as a currency.
Be sure to try out the live demo to see the credit card bill with summary information!
|
