Published: 08 Sep 2008
By: Azhar Khan
Download Sample Code

A custom control derived from the GridView that implements filtering, custom Top pager and custom Bottom pager.

Contents [hide]

Introduction

While out of the box the GridView is enough for most applications, often there is a need to customize it. One such customization requirement is for the Top Pager to be different from the Bottom Pager. GridView allows you to customize the Pager by using a Template construct, but it uses that same template for the Top Pager as well as the Bottom Pager. Another feature missing from the GridVew is filtering. Filtering allows the user to restrict the row set by specifying column values.

Figure 1: The custom control in action

The custom control in action

Background

In order to customize the GridView we need to first understand how it builds the control structure on the server side. On the client side the GridView is rendered as a <table> within a <div> element. On the server side the control tree is built within the GridView.controls  member variable as shown:

Figure 2: The control tree

The control tree

So we have a ChildTable at the root with all GridViewRows as its children. The very first row is the Pager row if it is needed. Next is the Header row. Then we have one or more DataRows. This is followed by the Footer row and then the Pager row if these are needed.

Using the Code

This is how the code for the custom grid is rendered in an ASPX file. Notice that for the columns that need filtering, the HeaderText attribute should have a space at the end. Here we have a space for the City and State columns.

Design Details

The design is explained in two sections, namely Custom Paging and Custom Filtering.

Custom Paging

When creating the Pager rows (both Top and Bottom), the GridView  calls a virtual method called InitializePager. We override this method and provide two new virtual methods called InitializeTopPager  and InitializeBottomPager  as follows:

Refer to the commented line in the above code and note that we cannot use GridView.TopPagerRow  to find out if IntializePager  is being called for creating the Top or the Bottom pager. Reason being, whenever GridView.CreateChildControls  gets called, it will in turn call InitializePager  twice, first time for the top pager and second time for the bottom pager. Now since CreateChildControls  itself may get called twice during postback/callback - first while getting created from ViewState and next when creating from database (for a paged GridView user requested a new page for eg.) - the TopPagerRow would already exists from the previous run. So we directly look at the control tree. If it is empty then the GridView has started creating the Top pager row.

Now we code the top pager as shown below:

We let the GridView  create the Bottom pager by calling base.InitializePager. The bottom pager is created as a Table (PagerTable) with single Row (TableRow) and a single Cell (TableCell). Then we customize the bottom pager by adding another Cell (goToCell) to the TableRow  as shown:

We also handle button clicks to go to a particular page by overriding the OnRowCommand  method as follows:

The HandlePageCommand  will then read the text from the text box and set the GridView.PageIndex  as shown below:

Custom Filtering

We add the filtering capability within the header row for each column. First we override the InitializeRow  method and if RowType is Header then we call the InitializeHeaderRow  method.

The InitializeHeaderRow  method in turn calls AddGlyphs  to add up/down arrows for sorting, and then calls AddFilters  to find if filtering is enabled for columns; and if it is, then it calls AddFilter  to add a TextBox  and a DropDownList  to that columns header cell. To enable filtering for a column include a space at the end of column header text in ASPX file or in codebehind (this is kludgy).

Notice that we are triggering the filter command when the user selects an operator from DropDownList, this done by making the DropDownList  to postback whenever its selection changes.

Here is our handler for filter:

The important thing to note here is that we set RequiresDataBinding  to true, this statement is checked by GridView duringPreRender  stage and it rebinds the data to the grid if it is true. This is exactly what we want: We don’t want to bind it immediately, we delay it until the very last stage. Meanwhile we also provide a virtual method called OnFilterCommand  for derived classes/Page to hook into our filtering.

Following is the OnPreRender function:

Here we call the GetFilterCommand  method, which loops through all the columns to form a where clause and returns it as filterCommand. Note that we check for a space character at the end of Columns[i].HeaderText to find if the user has enabled filtering for Columns[i].

We then use ApplyFilterCommand  to change the DataSourceView’s SelectCommand. Note that we only support SqlDataSource. I have to look into supporting ObjectDataSource.

References

Things that we can improve

  • Better way of specifying the columns that need filtering in ASPX file. We can derive from BoundColumn and implement it.
  • Instead of DropDownList using postback, it can use callback mechanism so that the whole page doesn't repainted each time you set a column filter. For this we can implement a custom DropDownList.
  • Suport for ObjectDataSource.
<<  Previous Article Continue reading and see our next or previous articles Next Article >>

About Azhar Khan

Sorry, no bio is available

This author has published 2 articles on DotNetSlackers. View other articles or the complete profile here.

Other articles in this category


Optimized Paging and Sorting in ASP.NET GridView
In this article I am going to demonstrate what are the performance drawbacks of using conventional w...
Persisting Selection in ASP.NET Grid Controls While Paging
How to persist selection correctly in a grid control (DataGrid, GridView, and ListView controls) whe...
A first look at the Dynamic Data Engine—the DynamicGridView Control
Dino Esposito introduces the ASP.NET DynamicGridView Control.
Sorting a Gridview with multiple Columns
The Gridview is the most used control to display data in a tabular format. By default it supports ma...

You might also be interested in the following related blog posts


Designer Support for One-Way navigations in Entity Framework 4 read more
VS 2010 Code Intellisense Improvements (VS 2010 and .NET 4.0 Series) read more
Gaia Ajax 3.6 Beta Released! Free download of new Ajax GridView, 35++ Ajax Components and 100++ New Samples read more
How To: Silverlight grid hierarchy load on demand using MVVM and RIA services read more
Free software for you! WebsiteSpark let the mountain go to Microsoft instead. read more
Customizing the SharePoint ECB with Javascript, Part 3 read more
Why VBA Still Makes Sense read more
Customizing the SharePoint ECB with Javascript, Part 1 read more
Ruminations on Multi-Tenant Data Architectures read more
Multiple child views with RadGridView for WinForms read more
Top
 
 
 

Discussion


Subject Author Date
placeholder Treeview search Kumar Gattu 6/28/2013 6:08 AM
Reg: Custom Gridview Matsya ganesh Vegi 5/13/2016 6:15 AM
placeholder User Control Gary Armstrong 10/17/2008 7:25 AM
How to Use this Control in Default.aspx.vb page Vijayaragavan r 1/21/2009 7:03 AM

Please login to rate or to leave a comment.