Click here to Skip to main content
Click here to Skip to main content

Gridview Header Filter

By , 22 Apr 2010
Rate this:
Please Sign up or sign in to vote.

Introduction

Most of the time, we need to filter gridview based on some filtering criteria. This article will show you how to filter using the gridview header. This is small but really useful stuff. You can extend it to suite your needs.

Background

Following are the prerequisites for this project:

  1. VS 2008 with Service Pack 1
  2. Ajax control toolkit DLL

Using the Code

The code is extremely simple and easy to use.

Define a HeaderTemplate for the column you want to filter on. Simply add a textbox with borderstyle set to None, AutoPostBack set to true and BackColor set to transparent. This will give a feel of label. Create a TextBoxWaterMarkExtender with TargetControlID set to the id of previous textbox. Set the WaterMarktext to the Header text you want to display.

<HeaderTemplate>
<asp:TextBox ID="txtCategoryNameHeader" runat="server" 

BorderStyle="None" AutoPostBack="true" BackColor="Transparent" 

OnTextChanged="txtCategoryNameHeader_TextChanged" ></asp:TextBox>
<asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" 

TargetControlID="txtCategoryNameHeader" WatermarkText="Category">
</asp:TextBoxWatermarkExtender>
</HeaderTemplate>   

Once you set the HTML tag, you can code it. You need to bind the txtCategoryNameHeader_TextChanged event with the following line of code:

((TextBox)this.gvCategory.HeaderRow.Cells[1].Controls[1]).TextChanged += 
						new System.EventHandler

(this.txtCategoryNameHeader_TextChanged);

Once you enter some text inside the header textbox, a post back event will fire and the following method will be executed:

protected void txtCategoryNameHeader_TextChanged(object sender, EventArgs e)
        {
            string text = ((TextBox)sender).Text;
            BindCategories(text);
        }

Rest of the filtering criteria is pretty self explanatory, so I wouldn't further explain it. Hope this will help you guys.

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                // Bind the categories with Grid
                BindCategories(string.Empty);
                // This is used to bind the textbox header with the event to fire when 
                ((TextBox)this.gvCategory.HeaderRow.Cells[1].Controls[1]).TextChanged 
					+= new System.EventHandler

(this.txtCategoryNameHeader_TextChanged);
            }
        }
        private void BindCategories(string CategoryFilter)
        {            
            try
            {
                // Simple created a table to bind with Grid view and 
                // populated it with data.
                DataTable dt = new DataTable("Category");
                dt.Columns.Add("ID");
                dt.Columns.Add("Name");
                DataRow dr ;
                for(int counter=1;counter<11;counter++)
                {
                    dr = dt.NewRow();
                    dr["ID"]=counter.ToString();
                    dr["Name"]= "Cat" + counter.ToString();
                    dt.Rows.Add(dr);
                }

                DataView dv = new DataView(dt);
                if(CategoryFilter != "")
                    dv.RowFilter="Name like '%" + CategoryFilter + "%'";

                if (CategoryFilter == "")
                    gvCategory.DataSource = dv;
                else
                    gvCategory.DataSource = dv;
                gvCategory.DataBind();
            }
            catch (Exception ex)
            {

            }
            finally
            {
                
            }
        }
        
        protected void txtCategoryNameHeader_TextChanged(object sender, EventArgs e)
        {
            string text = ((TextBox)sender).Text;
            BindCategories(text);
        }

Points of Interest

There do exist several ways to manipulate gridview and I found this one interesting so I just published it. For daily technical stuff, checkout my blog at http://hellowahab.blogspot.com/.

History

  • 16th April, 2010: First version published

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Wahab Hussain
Web Developer
Pakistan Pakistan
Follow my blogging activities here:-
http://www.hellowahab.wordpress.com
 
Follow my professional activities here:-
http://www.linkedin.com/in/hellowahab
 
Follow my tweets here:-
http://twitter.com/#!/hellowahab
 
Follow my personal activities here:-
https://www.facebook.com/hellowahab
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 4 Pinmemberdiogonborges7-Jan-13 5:08 
QuestionGridView disappears PinmemberHomey8323-Nov-11 11:16 
Questionvariation PinmemberSean80848-Sep-11 7:30 
GeneralMy 5 PinmemberOmar Gamil1-Jun-11 4:34 
GeneralMy vote of 5 PinmemberMember 41788502-Jul-10 3:05 
GeneralUsing < > = in PinmemberJanBorup3-May-10 11:20 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140415.2 | Last Updated 23 Apr 2010
Article Copyright 2010 by Wahab Hussain
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid