LogoASPAlliance: Articles, reviews, and samples for .NET Developers
Building a DataGrid Helper Control For ASP.NET 1.x: Part 1
by Li Chen
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 26108/ 72


[Download Code] 
The DataGrid control in ASP.NET 1.x is a very powerful control. However, it still requires the understanding of the life cycle of ASP.NET as well as many lines of code to create a functional data access page. Much of coding related to DataGrid control is repetitive in nature. The upcoming ASP.NET 2.0 has a new GridView control and several data source controls. Using the GridView control and one of the data source controls, it is possible to build a data access page without writing a single line of code. In this series of articles, we will develop a custom control that will drastically simplify the DataGrid programming in ASP.NET 1.x today.  In the first installment of this series, we will discuss how to simplify the programming of a read-only data access page.


In this article, we will first examine a typical data access page to identity the code that we can simplify. Next, we will build a control that allows us to simplify the DataGrid programming.  We will then show how to use this control and conclude this article. 


Now, let us take a look of a typical data access page.

A Typical Read-Only Data Access Page

[Download Code]
We will first look at what is involved in creating a typical data access page with sorting and paging functionality by examining an example. A live demo can be found at

The following are the basic steps used to create the page:

  1. Create a SqlConnection and a SqlDataAdapter member: Drag a table from the Server Explorer into the WebForm design surface. This will create a SqlConnection and a SqlDataAdapter member in the web form. Give these members names that make sense. This is one of the quickest ways to create a SqlDataAdapter with simple select, insert, delete and update capabilities. In this article, we will only use the select capability. In the next article of this series, we will also make use the delete and update capabilities.
  2. Add a DataGrid Control: Drag a DataGrid control from the tool box into the WebForm design surface. Enable sorting by setting the AllowSorting property to True and enable paging by setting the AllowPaging property to True. 
  3. Add code to respond to the Page_Load, DataGrid SortCommand and DataGridProducts PageIndexChanged events. The code behind the page will look like:

private void Page_Load(object sender, System.EventArgs e)
 if (!this.IsPostBack)

private void bindGrid()
 DataSet ds = new DataSet();
 DataView dv = ds.Tables[0].DefaultView;
 dv.Sort = (string)this.ViewState["SortExpression"];
 dataGridProducts.DataSource = dv;

private void dataGridProducts_SortCommand(object source, 
System.Web.UI.WebControls.DataGridSortCommandEventArgs e)
 string sortExpression = e.SortExpression;
 //Alternate the sorting direction
 if ((string)this.ViewState["SortExpression"] == sortExpression)
  sortExpression += " DESC";

 this.ViewState["SortExpression"] = sortExpression;
 //Reset CurrentPageIndex on resort
 dataGridProducts.CurrentPageIndex = 0;

private void dataGridProducts_PageIndexChanged(object source, 
System.Web.UI.WebControls.DataGridPageChangedEventArgs e)
 dataGridProducts.CurrentPageIndex = e.NewPageIndex;

The bindGrid function is the function that creates the data source and binds it to the DataGrid.

The code in the Page_Load event will populate the DataGrid when the page is initially accessed. The line, if (!this.IsPostBack), will prevent the bindGrid function from getting called multiple times in a post-back situation such as sorting or paging.

The code in the SortCommand and PageIndexChanged event handlers are responsible for sorting and paging the data. In the code, we also added the functionality alternate the sort direction on subsequent click of the same column header.

Note that the code in the three event handlers is rather generic; the knowledge of the data source is fully contained in the bindGrid function. Therefore, the repetitive code in these three event handlers could be reused by moving it to a control. We will examine how to do this in the next section.

Create a DataGrid Helper Control

[Download Code]
There are several methods to enhance the functionality of an existing control: to inherit from the control, to create a wrapper for the control or write an extender or helper class. We will use the last method because it preserves the design-time functionality of the DataGrid control.

The DataGridHelper.cs file in the WebDataControls project contains the code for the DataGridHelper control. The DataGridHelper control has a DataGrid property that can be used to attach a DataGridHelper control to a DataGrid control. The DataGridHelper then handles the SortCommand and IndexChanged events of the DataGrid so that users of the control do not have to handle these events. The DataGridHelper also handled the Page_Load type functionality in the OnPreRender event of the control. We use the OnPreRender event because it fires after the controls states are already restored but before the page is rendered.

The DataGridHelper control exposes a single event called LoadData. The users of DataGridHelper must respond to this event to get the data source and set it to the DataSource property of the event argument.

The DataGridHelper control also has a few additional properties that allow fine tuning its behavior:

Property Purpose
AlternateSortDirection Alternate the sort direction on subsequent clicks of the same column header
AutoSortDataView If this property is true and the data source is a DataSet, DataTable or DataView, the DataGridHelper control will sort the data automatically
SortExpression The current sort expression. This property is useful when the user of the control wants to sort the data themselves in the LoadData event.
ResetPageIndexOnSorting If this property is True, the control will reset the page index whenever the sort expression is changed

The DataGridHelper control also exposes a method, GridLoad. We need to call this method only if we have a post-back from another control and we want to refresh the data in response to the change.

In the next section, we will show how to use the DataGridHelper control.

Using the DataGridHelper Control

[Download Code]
The DataGridHelper.aspx page demonstrates the use of DataGridHelper control. A live demo can be accessed at

This page has the identical functionality as the TypicalDataAccessPage.aspx. It was also created in nearly the same way. The only difference is that we drop the DataGridHelper control into the page instead of writing all the code. One of the easiest ways to drop the control is to right click on one of the tabs in the tool box and click “Add/Remove items…” from the dropdown menu. Then browse and select the WebDataControl.dll file that is in the download that accompanies this article.

We then need to add some code to respond to the Page_Init event and the LoadData event of the DataGridHelper control. The following shows the code behind:

private void DataGridHelper_LoadData(object Sender, 
Dotneteer.WebDataControls.LoadDataEventArgs e)
 DataSet ds = new DataSet();
 e.DataSource = ds;

private void DataGridHelperTest_Init(object sender, System.EventArgs e)
 dataGridHelper.DataGrid = dataGridProducts;

In the Init event, we need a single line of code to attach the DataGrid control to the DataGridHelper control.

In the LoadData event, we create the data source and assign it to the DataSource property of the event argument. That is it! We have a functional page.

In the next section, we will further discuss the features of DataGridHelper control and conclude this article.

Final Notes

[Download Code]
In concluding this article, I would like to point out the following:

  1. The LoadData event only requires a data source to be created and assign to the DataSource property of the event argument. Therefore, it is possible to create the data source in a middle-tier class instead of in the data access page.
  2. In all the demos in this article, we sort and page the data in ASP.NET. While this method works well for small datasets, we should avoid it on large datasets.  We should consider sorting large datasets on the server side. The SortExpression property the DataGridHelper control could be used in the LoadData event to sort the dataset on the server side. Currently, there are a number of techniques available on paging through large datasets. We should set the AllowCustomPaging property of the DataGrid control to true, and use the CurrentPageIndex property of the DataGrid to fetch a subset of data in the LoadData event.

In the next article of the series, I discuss how to simplify the DataGrid programming involved in doing an update or delete.

Check for future updates. For comments, questions and suggestions, email

Product Spotlight
Product Spotlight 

©Copyright 1998-2019  |  Page Processed at 2019-06-24 1:37:59 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search