GridView Examples for ASP.NET 2.0: Displaying Summary Data in the Footer

Click here to return to the TOC.

In the Drilling Down into Detailed Data section we looked at an example of drilling down from a GridView of orders into a GridView of specific line items for a particular order. In addition to listing the individual line items in a real-world Web application we'd likely also want to display the total dollar amount of the order along with the total number of items shipped. While this information could be placed anywhere on the screen, it would likely be best to place it in the Footer of the order details GridView, as shown in Figure 34.

Figure 34 (Click on the graphic for a larger image)

There are a couple of ways to accomplish this. One technique is to issue a query to the database, summing up the total cost and total quantity shipped for a particular order. Another technique is to keep a running total of the cost and quantity shipped for each item in the GridView. Let's examine how to display these summations in the Footer using the second technique.

When the GridView is bound to a data source control, the GridView is composed by enumerating the DataSource and building one row at a time. As each GridView row is databound, the GridView's RowDataBound event is fired. This provides page developers an opportunity to tap into the GridView creation process at row-level granularity. Therefore, to sum up the UnitPrice and Quantity column values, we just need to have the RowDataBound event handler determine the values of the UnitPrice and Quantity fields for each row and add those values to running total variables.

The RowDataBound event handler fires as each DataRow is databound. After all of the DataRows have been databound, the Footer is created (assuming that the GridView's ShowFooter property is set to True). By the time the Footer is created, we've summed up the UnitPrice and Quantity values for all of the rows, meaning we're ready to display the grand totals in the Footer. The following RowDataBound event handler code shows how to access the values for the UnitPrice and Quantity fields and add their running total to a variable. Furthermore, it shows how to set the text in the appropriate cells of the Footer.

The RowDataBound Event Handler (Visual Basic)

Dim priceTotal As Decimal = 0
Dim quantityTotal As Integer = 0
Sub detailsGridView_RowDataBound(ByVal sender As Object, _
  ByVal e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        ' add the UnitPrice and QuantityTotal to the running total variables
        priceTotal += Convert.ToDecimal(DataBinder.Eval(e.Row.DataItem, _
          "UnitPrice"))
        quantityTotal += Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, _
          "Quantity"))
    ElseIf e.Row.RowType = DataControlRowType.Footer Then
        e.Row.Cells(0).Text = "Totals:"
        ' for the Footer, display the running totals
        e.Row.Cells(1).Text = priceTotal.ToString("c")
        e.Row.Cells(2).Text = quantityTotal.ToString("d")
        
        e.Row.Cells(1).HorizontalAlign = HorizontalAlign.Right
        e.Row.Cells(2).HorizontalAlign = HorizontalAlign.Right
        e.Row.Font.Bold = True
    End If
End Sub
The RowDataBound Event Handler (C#)
decimal priceTotal = 0;
int quantityTotal = 0;
void detailsGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // add the UnitPrice and QuantityTotal to the running total variables
        priceTotal += Convert.ToDecimal(DataBinder.Eval(e.Row.DataItem, _
          "UnitPrice"));
        quantityTotal += Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, _
          "Quantity"));
    }
    else if (e.Row.RowType == DataControlRowType.Footer)
    {
        e.Row.Cells[0].Text = "Totals:";
        // for the Footer, display the running totals
        e.Row.Cells[1].Text = priceTotal.ToString("c");
        e.Row.Cells[2].Text = quantityTotal.ToString("d");
        
        e.Row.Cells[1].HorizontalAlign = _
          e.Row.Cells[2].HorizontalAlign = HorizontalAlign.Right;
        e.Row.Font.Bold = true;
    }
}

The priceTotal and quantityTotal variables are used to hold the running totals for the UnitPrice and Quantity fields, respectively. In the RowDataBound event handler a check is made to see if we are dealing with a DataRow or the Footer. For the DataRows, the priceTotal and quantityTotal variables are incremented by the values of the databound UnitPrice and Quantity field values. For the Footer, the Footer's left-most column (Cells(0) in Visual Basic, Cells[0] in C#) has its Text property set to "Totals:" and has the grand totals for the price and quantity displayed in its second and third columns, respectively. Finally, the second and third columns' HorizontalAlign properties are set to be right-aligned and the entire row's font is specified to be bold.

That's all there is to it! The declarative syntax of the ASP.NET page is identical to that shown in the first drill-down report demo. Refer back to Figure 34 to see a screenshot of the totals in the Footer.

Next Section: Deleting a GridView's Underlying Data

© Microsoft Corporation. All rights reserved.