Knowledge Base

HOW TO: Create a Summary Row for a DataGrid in ASP.NET by Using Visual C# .NET

Article ID: 326339

Article Last Modified on 5/21/2003

APPLIES TO

Microsoft ASP.NET 1.1
Microsoft ASP.NET 1.0
Microsoft Visual C# .NET 2003 Standard Edition
Microsoft Visual C# .NET 2002 Standard Edition

This article was previously published under Q326339

For a Microsoft Visual Basic .NET version of this article, see 313154.

This article refers to the following Microsoft .NET Framework Class Library namespace:

System.Data.SqlClient

IN THIS TASK

SUMMARY

Requirements
Create a Visual C# .NET Project and Add the DataGrid
Write Code to Access the Database
Use the ItemDatabound Event
Build the Project and Test the Code

REFERENCES

SUMMARY

This step-by-step article describes how to create a summary row for a DataGrid control in ASP.NET.

In this article, you create a Visual C# .NET project, add code to access the Sales Totals by Amount view from the Northwind database, and then bind the Sales Totals by Amount view to the DataGrid. This sample uses the ItemDataBound event of the DataGrid to total the SaleAmount field when you bind the data to the DataGrid. This sample also uses the footer of the DataGrid to display the summary or the totals.

back to the top

Requirements

The following list outlines the recommended hardware, software, network infrastructure, and service packs that are required:

Microsoft Windows 2000 Professional, Microsoft Windows 2000 Server, Microsoft Windows 2000 Advanced Server, or Microsoft Windows XP
Microsoft .NET Framework
Microsoft Visual Studio .NET
Microsoft Internet Information Services (IIS)
Microsoft SQL Server 7.0 or later and the Northwind database

NOTE: The Northwind is included with Microsoft SQL Server 7.0 and later.

back to the top

Create a Visual C# .NET Project and Add the DataGrid

In this section, you create a Visual C# .NET project, select a format for the DataGrid, and then set the DataGrid to display the footer. Because you use the footer to display the summary, it is important that you display the footer.

NOTE: By default, the ShowFooter property is turned off.

Start Visual Studio .NET. The Visual Studio .NET IDE appears.
On the File menu, point to New, and then click Project.
In the New Project dialog box, click Visual C# Projects under Project Types, and then click ASP.NET Web Application under Templates.
In the New Project dialog box, notice that the Name box is unavailable (it appears dimmed). The Location box contains the following text (or similar):

http://localhost/WebApplication1

Change the location to http://localhost/SummaryRow, and then click OK. A new project is created, which includes a Web Form that is named WebForm1.aspx.
In Solution Explorer, double-click WebForm1.aspx.
Drag a DataGrid control from the toolbox to the form.
Right-click DataGrid, and then click Auto Format. Click Colorful 1, and then click OK.
Right-click DataGrid, and then click Properties. In the Properties dialog box, change the value of the ShowFooter property to True.

back to the top

Write Code to Access the Database

In this section, you use the Sales Totals by Amount view that is located in the Northwind database to calculate the summary for the SaleAmount field. The Sales Totals by Amount view includes the Orders, the CompanyName, and the SaleAmount fields.

In the Visual Studio .NET IDE, right-click the Web Form, and then click View Code.
In the code-behind window, add the following code to the top of the page:
```
using System.Data.SqlClient;
                    
```

Add the following code in the class declaration section:

private double myTotal;  //This variable tracks the running total.

Replace the code in the Page_Load event with the following code:

private void Page_Load(object sender, System.EventArgs e)
{
   //Connect to the database, retrieve data, and then fill the data in the  DataSet.
  SqlConnection myConnection = new SqlConnection("server=(local);uid=sa;" +
               "pwd=password;database=northwind");
  SqlDataAdapter myDataAdapter = new SqlDataAdapter("SELECT top 15 [OrderID], [CompanyName], " + 
               "[SaleAmount]  FROM [Northwind].[dbo].[Sales Totals by Amount]",   myConnection);
  DataSet myDataSet = new DataSet();
  myDataAdapter.Fill(myDataSet);

  //Set the DataSource for the DataGrid, and then bind the data.
  DataGrid1.DataSource = myDataSet;
  DataGrid1.DataBind();
}

Modify the connection string as appropriate for your environment.

Expand the "Web Form Designer generated code" region, and then add the following statement in the InitializeComponent function:

this.DataGrid1.ItemDataBound += new System.Web.UI.WebControls.DataGridItemEventHandler(this.DataGrid1_ItemDataBound);

back to the top

Use the ItemDataBound Event

The ItemDataBound event is raised after an item is data bound to the DataGrid control. This event gives you with the last opportunity to access the data item before it appears on the client. After this event is raised, the data item is null and is no longer available.

For each item that is data bound, you must check the ItemType property. If ItemType is of type Item or AlternatingItem, you receive the value from the last cell of the item, which contains the SaleAmount value. In this sample, you add this value to the running summary variable. When the ItemType is Footer, you receive the total from all of the rows. Therefore, you assign the value of the summary variable to the text value of the last cell.

NOTE: This code uses formatting expressions to provide a uniform look for the SaleAmount data.

Add the following code after the Page_Load event:

private void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e )
{
        
  switch ((int)(e.Item.ItemType))
  {
    case (int)ListItemType.Item :
    case (int)ListItemType.AlternatingItem: 
         //Calculate total for the field of each row and alternating row.
         myTotal += Convert.ToDouble(e.Item.Cells[2].Text);
     //Format the data, and then align the text of each cell to the right.
    e.Item.Cells[2].Text = Convert.ToDouble(e.Item.Cells[2].Text).ToString("##,##0.00"); 
    e.Item.Cells[2].Attributes.Add("align", "right");
    break;
    case (int)ListItemType.Footer:
    //Use the footer to display the summary row.
    e.Item.Cells[1].Text = "Total Sales";
    e.Item.Cells[1].Attributes.Add("align", "left");
    e.Item.Cells[2].Attributes.Add("align", "right");
    e.Item.Cells[2].Text = myTotal.ToString("c");
    break;
  }
}

back to the top

Build the Project and Test the Code

On the File menu, click Save All.
On the Build menu, click Build Solution.
In Solution Explorer, right-click the .aspx page, and then click View in Browser. The .aspx page appears in the browser, and the DataGrid displays the OrderID, the CompanyName, and the SaleAmount columns. Notice that the footer displays the total of the SaleAmount column.

back to the top

REFERENCES

For more information, visit the following Microsoft Web sites:

DataGrid.ItemDataBound Event
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpref/html/frlrfsystemwebuiwebcontrolsdatagridclassitemdataboundtopic.asp

DataGrid Web Server Control Samples
http://samples.gotdotnet.com/quickstart/aspplus/samples/webforms/ctrlref/webctrl/datagrid/doc_datagrid.aspx

Server-Side Data Access (includes DataGrid samples)
http://samples.gotdotnet.com/quickstart/aspplus/doc/webdataaccess.aspx

DataGrid Class
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpref/html/frlrfSystemWebUIWebControlsDataGridClassTopic.asp

Formatting Overview
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpguide/html/cpconformattingoverview.asp

back to the top

Additional query words: Summary Row DataGrid Total

Keywords: kbhowtomaster kbdatabinding kbcodesnippet kbservercontrols kbevent KB326339

Microsoft KB Archive/326339

Contents

HOW TO: Create a Summary Row for a DataGrid in ASP.NET by Using Visual C# .NET

IN THIS TASK

SUMMARY

Requirements

Create a Visual C# .NET Project and Add the DataGrid

Write Code to Access the Database

Use the ItemDataBound Event

Build the Project and Test the Code

REFERENCES