Click here to Skip to main content
15,035,866 members
Articles / Web Development / ASP.NET
Posted 13 May 2006


44 bookmarked

An ASP.NET DataGrid with AutoFilter

Rate me:
Please Sign up or sign in to vote.
3.58/5 (11 votes)
13 May 20062 min read
This article describe a DataGrid inherited web control with Excel like AutoFilter feature

Sample Image - DataGridAF1.gif


In this article I will show a new web control, a DataGrid with a HtmlSelect control in each column which allows a filter selection of items, like Microsoft Excel AutoFilter does. The control is directly inherited from System.Web.UI.WebControls.DataGrid and was tested under Microsoft IE 6.0, Mozilla FireFox 1.0.2, Netscape 7.2, Opera 7.54.

Using the code

Add the DataGridAF.dll to your project’s references and toolbox, and use it as a DataGrid base control. The only difference is a new property, ShowFilter, which allows you to show or hide the HtmlSelect controls in the columns header.

Image 2

To run the demo project, unzip it under a virtual directory and start it. In the demo project, DataGridAF data are loaded from a xml file, Customers.xml (a select from Customers in Northwind database), so you don’t need to connect to a database.

The DataGridAutoFilter Class

DataGridAutoFilter class is very easy. All we need is to override two methods: OnItemDataBound and RaisePostBackEvent. The first is raised after each item is data bound to the DataGrid control and is where HtmlSelect controls are loaded (thank to Tony Truong's article for the idea); the second is used to capture the post back event raised when a HtmlSelect element is selected and is inherited from the IPostBackEventHandler interface (see this David S. Platt's book for a complete description).

OnItemDataBound Method

In this method all DataGrid items are data bound. First ListItemType.Header, then ListItemType.Item, ..., last ListItemType.Footer.

override protected void OnItemDataBound(DataGridItemEventArgs e)
    switch (e.Item.ItemType)
        case ListItemType.Header:
            // see later on
        case ListItemType.Item:
        case ListItemType.AlternatingItem:
        case ListItemType.SelectedItem:
            // see later on

        case ListItemType.Footer:
            // see later on

First Header: here is where the HtmlSelect is created, with “onchange” handler that causes a postback, it is added to an ArrayList to be accessed later on and it is added to the column header cell to be rendered. Also a SortedList object is created, but only to sort data before load in HtmlSelect.

case ListItemType.Header:
    for(int i=0; i< e.Item.Cells.Count; i++)
        // ...
        // add a select element, with "onchange" handler that causes a postback to RaisePostBackEvent;
        HtmlSelect select = new HtmlSelect();
        select.Attributes.Add("onchange", Page.GetPostBackEventReference(this));
        // add the select element to the ArrayList;
        // add a SortedList object, with an empty item;
        SortedList sorted = new SortedList();
        sorted.Add("", "");
        // load the SortedList object into the ArrayList;

Then items are data bound: here SortedList are loaded with “distinct” values of the columns.

case ListItemType.Item:
case ListItemType.AlternatingItem:
case ListItemType.SelectedItem:
    for(int i=0; i< e.Item.Cells.Count; i++)
        // fill the SortedList object with the "distinct" values from each columns;
        SortedList sorted = (SortedList)sort[i];
        if (sorted.ContainsValue(e.Item.Cells[i].Text) == false)
            sorted.Add(e.Item.Cells[i].Text, e.Item.Cells[i].Text);

Last the footer: here the sorted data are copied from the SortedList objects to the HtmlSelect controls.

case ListItemType.Footer:
    for(int i=0; i< e.Item.Cells.Count; i++)
        SortedList sorted = (SortedList)sort[i];
        HtmlSelect select = (HtmlSelect)list[i];
        // load sorted item into select element;
        for(int j=0; j< sorted.Count; j++)

RaisePostBackEvent Method

Here is were each DataGrid item is shown or hidden, according to the user selections.

public void RaisePostBackEvent(string eventArgument)
    // for each row;
    for (int i=0; i< Items.Count; i++)
        // for each column;
        for (int j=0; j< Items[i].Cells.Count; j++)
            HtmlSelect select = (HtmlSelect)list[j];
            if (select.SelectedIndex > 0)
                // hide rows with a not selected value;
                if (Items[i].Cells[j].Text != select.Items[select.SelectedIndex].Text)
                    Items[i].Visible = false;


When you have many rows in a DataGrid and you wish to select a subset of data, an AutoFilter feature may be a solution. I have not found such a control on the web, so I tried to create it. DataGridAF is not a sophisticated control, and does not allow advanced selections like Excel AutoFilter does, but it is easy to use and you can also do multiple selections, wich can be combined with sorting or paging data.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

stefano piuri
Web Developer
Italy Italy
I work for an Italian bank. I have 15+ years experience in bank and financial software.
I am interested in .NET (C#, ASP.NET, ...) and in SQL Server (TSQL, OLAP, ...) tecnologies.

Comments and Discussions

QuestionDoesn't work: list is empty after postback Pin
atverweij7-Jun-17 2:09
Memberatverweij7-Jun-17 2:09 
QuestionMa è fantastico!!! Pin
RAG13-Dec-13 3:44
MemberRAG13-Dec-13 3:44 
Question4.0 Version Pin
toddmo8-Jul-11 18:13
Membertoddmo8-Jul-11 18:13 
GeneralGreat Code! Thanks! Pin
Neh.C30-Mar-09 1:21
MemberNeh.C30-Mar-09 1:21 
GeneralRe: Great Code! Thanks! Pin
stefano piuri30-Mar-09 1:46
Memberstefano piuri30-Mar-09 1:46 
QuestionA little help? Pin
Neh.C31-Mar-09 2:04
MemberNeh.C31-Mar-09 2:04 
Hi Stefano, just wondering if you have time to give me an idea on how to disable the filter on certain columns. Just guidelines will do, I am not asking you for the entire code.

AnswerRe: A little help? Pin
stefano piuri31-Mar-09 21:27
Memberstefano piuri31-Mar-09 21:27 
GeneralRe: A little help? Pin
liferiders29-Oct-10 5:01
Memberliferiders29-Oct-10 5:01 
GeneralNeed to turn autofiltering off in some columns Pin
lsantos200013-Jul-08 5:08
Memberlsantos200013-Jul-08 5:08 
Questionsorting resets the filtering and clears all the drop downs Pin
Hermit Dave27-May-08 22:12
professionalHermit Dave27-May-08 22:12 
General[Message Deleted] Pin
ryuxuyr17-Apr-08 6:23
Memberryuxuyr17-Apr-08 6:23 
GeneralRe: ComboBox update Pin
stefano piuri18-Apr-08 3:15
Memberstefano piuri18-Apr-08 3:15 
Generalupdate to 2.0 please Pin
damphire10-Jan-08 7:47
Memberdamphire10-Jan-08 7:47 
GeneralRe: update to 2.0 please Pin
stefano piuri11-Jan-08 2:22
Memberstefano piuri11-Jan-08 2:22 
GeneralRe: update to 2.0 please Pin
couter10-Mar-08 2:10
Membercouter10-Mar-08 2:10 
GeneralRe: update to 2.0 please Pin
stefano piuri12-Mar-08 4:17
Memberstefano piuri12-Mar-08 4:17 
General[Message Deleted] Pin
VirtualRichard31-Oct-07 5:47
MemberVirtualRichard31-Oct-07 5:47 
GeneralRe: ASP.NET 2.0? Pin
stefano piuri31-Oct-07 6:52
Memberstefano piuri31-Oct-07 6:52 
General[Message Deleted] Pin
VirtualRichard31-Oct-07 7:57
MemberVirtualRichard31-Oct-07 7:57 
GeneralRe: ASP.NET 2.0? Pin
SchnozToiger13-Mar-09 6:06
MemberSchnozToiger13-Mar-09 6:06 
GeneralRe: ASP.NET 2.0? Pin
stefano piuri16-Mar-09 3:02
Memberstefano piuri16-Mar-09 3:02 
GeneralThank for the example Pin
ntgrvt20-Feb-07 12:22
Memberntgrvt20-Feb-07 12:22 
GeneralRe: Thank for the example Pin
stefano piuri20-Feb-07 20:49
Memberstefano piuri20-Feb-07 20:49 
QuestionError !? Pin
ttphp24-May-06 21:53
Memberttphp24-May-06 21:53 
AnswerRe: Error !? Pin
stefano piuri24-May-06 23:48
Memberstefano piuri24-May-06 23:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.