AspdotnetCodes.com
Search
Articles
Books
Resources
Asp.Net News
Downloads
Free Tech Magazines
Asp.Net Web Hosting
Archives
Softwares
Newsletter
Suggest Us
Link to Us
Feeds Subscription
Articles
Questions & Answers
Tips & Tricks
 Asp.Net GridView Control with Multiple Filters
Posted by Moderator1 on 6/29/2007 10:18:56 AM Category: ADO.NET
Total Views : 198211
Add to my favorites
Email to friend
  
Introduction
This article explains the methodology of implementing multiple filters in an Ajax based Asp.Net GridView control. The main point to note down in this article is to filter the data within the GridView control.
Asp.Net GridView control is used to displays the values of a data source in a table where each column represents a field and each row represents a record. If you are familiar with the DataGrid control from the .NET Framework version 1.0, the GridView control is the successor to the DataGrid control. The GridView control enables you to select, sort, and edit records that get displayed from the data source. This article will give a brief knowledge to build a dropdown list filtering function within the GridView control. Additionally, we are going to implement AJAX into it.

Sample Scenario

For demonstration, let us take customer information to be filled in the GridView. We can build filters on all columns of the GridView, but for this demonstration, we just try to implement two types of filters one for the Gender and another for the Customer Type. For each filter we need to add DropDownList controls. The first DropDownList we are going to fill with static data and another we are going to fill with some dynamic content from the data source.

Set up the GridView Control

Open Microsoft Visual Studio 2005, create an Asp.Net Ajax Enabled Website, drag and drop an UpdatePanel, and drag and drop a GridView control from your Toolbox Data tab into the UpdatePanel.
Change the value of AutoGenerateColumns of the GridView to false. Click on the SmartTag of the GridView, choose Add New Column, from the popup window to Add Field, add five TemplateFields in the GridView for Name, Gender, City, State and Customer Type. In each template field’s ItemTemplate section, add a Label Control and bind it to the corresponding field in the data source. The fields in our customer table are Cus_Name [Name of the Customer], Cus_Gender [Gender], Cus_City [City], Cus_State [State] and Cus_Type [Customer Type]. We are going to add DropDownList for the Gender and Customer Type column. So insert two DropDownList controls into the HeaderTemplate section of Gender and Customer Type column and name it as cmbGender and cmbCustomerType respectively.

Alter the AutoPostBack of the cmbGender DropDownList to True and since this dropdown has to contain static data, add ListItems such as All, Male and Female. Also add an event OnSelectedIndexChanged into it. So the structure of cmbGender will be as follows
<asp:DropDownList ID="cmbGender" runat="server" AutoPostBack="True" OnSelectedIndexChanged="cmbGender_SelectedIndexChanged">
<asp:ListItem Value="All">All</asp:ListItem>
<asp:ListItem Value="Male">Male</asp:ListItem>
<asp:ListItem Value="Female">Female</asp:ListItem>
</asp:DropDownList>

Now the cmbCustomerType control is going to hold dynamic data, so specify the DataTextField and DataValueField as Cus_Type. That is unique customer type data is going to fill in this DropDownList. Then make the AutoPostBack to True and add an event OnSelectedIndexChanged to do postback.

<asp:DropDownList ID=" cmbCustomerType" runat="server" AutoPostBack="True"
DataTextField="Cus_Type" DataValueField="Cus_Type"
OnSelectedIndexChanged="cmbType_SelectedIndexChanged">
</asp:DropDownList>
The first step in the code behind is to fill the cmbCustomerType control with unique dynamic data from data source and to retain its value on every postback. So we have to declare two page scope variables at the top of page to hold the DropDownList controls values.

protected string CustomerType;
protected string Gender;

These two variables will keep the value of the DropDownList on every postback. Now in the RowDataBound of the GridView control, we have to write a small block of code to fetch data from database and fill the cmbCustomerType control.


if (e.Row.RowType == DataControlRowType.Header) {
DropDownList cmbCustomerType = (DropDownList)e.Row.FindControl("cmbCustomerType");
cmbCustomerType.DataSource = FetchUniqueCustomerType();
cmbCustomerType.DataBind();
cmbCustomerType.Items.Insert(0, new ListItem("All", "All"));
cmbCustomerType.SelectedValue = CustomerType;

DropDownList cmbGender = (DropDownList)e.Row.FindControl("cmbGender");
cmbGender.SelectedValue = Gender;
}

The method FetchUniqueCustomerType should return the records with unique customer type information. You can write this method’s definition in some class file.

Now we need to fill the GridView with records from the database. To achieve this we are going to write a new method called BindGridView. The code block is given below
private void BindGridView() {
DataView dv = GetAllCustomers();
string condition = null;

if (GridView1.HeaderRow != null)
{
  DropDownList cmbCustomerType=(DropDownList)GridView1.HeaderRow.FindControl("cmbCustomerType");
  CustomerType = cmbCustomerType.SelectedValue;

  DropDownList cmbGender = (DropDownList)GridView1.HeaderRow.FindControl("cmbGender");
  Gender = cmbGender.SelectedValue;
  if (cmbCustomerType.SelectedValue != "All")
  {
    condition = "Cus_Type='" + cmbCustomerType.SelectedValue + "'";
  }

    if (cmbGender.SelectedValue != "All") {
      if (condition!= null)
        condition += " and Cus_ Gender ='" + cmbGender.SelectedValue + "'";
    else
        condition = "Cus_ Gender ='" + cmbGender.SelectedValue + "'";
     }
}


if (condition!= null)
   dv.RowFilter = condition;

GridView1.DataSource = dv;
GridView1.DataBind();
}
If you closely look at the above code once, you can easily understand the logic behind that. We are binding the GridView Control by a method which returns a DataView, then by consuming the values from the DropDownList, we construct a conditional string, then we do filter in the records of the DataView.

Point-by-Point Explanation

1. The method GetAllCustomers returns some records from the database and its return type is DataView.

DataView dv = GetAllCustomers();
2. Declare a variable to construct conditional string to do filter in the DataView.

string condition = null;
3. Checking if HeaderRow Exists for the GridView, else it will raise an exception.

if (GridView1.HeaderRow != null) {}


4. Find both DropDownList controls in the HeaderRow and assign its value to the variables to retain the value after every postback you made during filtering.
  DropDownList cmbCustomerType=(DropDownList)GridView1.HeaderRow.FindControl("cmbCustomerType");
  CustomerType = cmbCustomerType.SelectedValue;

  DropDownList cmbGender = (DropDownList)GridView1.HeaderRow.FindControl("cmbGender");
  Gender = cmbGender.SelectedValue; 
5. Next we building the expression with both DropDownList control’s SelectedValue and check if SelectedValue is ‘All’, then no need to construct it in the expression.
  if (cmbCustomerType.SelectedValue != "All")
  {
    condition = "Cus_Type='" + cmbCustomerType.SelectedValue + "'";
  }

    if (cmbGender.SelectedValue != "All") {
      if (condition!= null)
        condition += " and Cus_ Gender ='" + cmbGender.SelectedValue + "'";
    else
        condition = "Cus_ Gender ='" + cmbGender.SelectedValue + "'";
     } 
  }
6. If the string condition is not empty then we do filter in the DataView and then assing to the GridView control, which will display the available records only.

  if (condition!= null)
   dv.RowFilter = condition;

GridView1.DataSource = dv;
GridView1.DataBind();

Since this GridView control is placed inside an UpdatePanel, filtering records will be functioned in AJAX based without any postback.

Friends, here we provide only the basic logic to build Multiple Filters in a GridView. These can differ from application to application and from requirment to requirement. It is upto you READERS, to modify the code and apply the logic your application required.
 
To view our sample GridView with Multiple Filters, click here.
 
Viewer's Comments
Posted by Roger K on 8/15/2007 8:12:06 AM
This is an Excellent - can you post the project ( the source code of the project ) pl - it will be a BIG help. Thanks.
 
Posted by Henry on 8/25/2007 10:42:26 AM
can you post the project ( the source code of the project ) pl
 
Posted by Susan on 9/4/2007 3:07:57 PM
Is there a way to implement selecting multiple rows from a grid view or a datagrid? There is a need to do this, but I could not come up with any idea about this except maybe AJAX. Thanks
 
Posted by peter on 9/4/2007 5:15:27 PM
can you please post a source code for this example?
 
Posted by Jeff on 10/3/2007 9:17:06 PM
Thanks.
 
Posted by hilde on 10/16/2007 3:42:50 PM
Hi, the article is very good. I've tried to follow your examples but using 3 dropdown filters. No success yet... Could you please post a source code??
 
Posted by Richard on 10/31/2007 8:50:03 AM
Do you have any idea how useless an article like this is without the author taking just 1 minute to zip up the source project folder and post it with the article? Would it really hurt that much? As a developer, I am sure you understand the concept of time - and hate having to rewrite something that has already been written! :( Look at all the people asking the same - listen to your readers...
 
Posted by Christine on 11/6/2007 10:43:44 AM
Can you send the project for me? This article is very useful for me. But I can't let the Dropdownlist in the head row works fine. Please!
 
Posted by Elias Escobar on 11/20/2007 1:00:30 PM
May you send me the project please?....very handy Thank you
 
Posted by Adrian on 12/2/2007 12:33:33 AM
Hello guys, and thank you very much to the article's author for the example, it is exactly the same thing I have been trying to achieve... has any of you gotten to make it work? I haven't :( Best regards to all,
 
Posted by Faheem Ahmad on 12/6/2007 1:07:53 AM
Very interesting and helpful. Kindly keep it up.
 
Posted by pbk on 1/3/2008 6:17:26 AM
Very Goog one bht the thing is Do you have any idea how useless an article like this is without the author taking just 1 minute to zip up the source project folder and post it with the article? Would it really hurt that much? As a developer, I am sure you understand the concept of time - and hate having to rewrite something that has already been written! :( Look at all the people asking the same - listen to your readers...
 
Posted by srinivasa reddy on 1/18/2008 3:21:04 AM
my problem is i have one gridview in that i have multiple dropdownlists and textboxes and i have one button outside the gridview, after enter the all values the data will goes to the database and shows in the gridview............... that is problem pls help me ok pls send me code to my mail. thank u sir....................
 
Posted by Travis on 2/15/2008 4:52:11 PM
This article is needed but doesn't provide enough information to be ANY use to me. You are a tease sir. Please post the source code or remove your article so I (and other students) won't see it in a search result. Thanks
 
Posted by maurizio on 3/1/2008 12:03:13 PM
good idea..i will try...just a question.. if u have some colums good for sort and u press the header u loose the filter? ciao maurizio
 
Posted by jithendar on 3/8/2008 2:37:25 AM
can u mail the full code
 
Posted by l on 5/1/2008 10:31:36 AM
Still looking for that code
 
Posted by G on 5/1/2008 10:33:23 AM
This article is very helpful, but as a newbie I would really appreciate the full code to follow. Any way I can get it?
 
Posted by Ajay Sadyal on 5/29/2008 3:59:34 AM
it good but,give the images of all steps with it/ thank you!
 
Posted by babita on 6/5/2008 3:33:39 AM
hi plz tell m hw to pick crosspondance data from xml file and hw to bind with dropdownlist
 
Posted by Aaron on 6/12/2008 11:36:01 AM
Any update on getting the source code for this? Man would it help a lot!!!!!
 
Posted by May Su on 6/30/2008 1:43:11 AM
Very nice. I would like to get the source code of this example.
 
Posted by Joe on 6/30/2008 5:22:52 PM
Just what I've been looking for! Could I please get a copy of the source code of this example.
 
Posted by Steve Low on 7/9/2008 3:33:49 AM
I used this example to AJAX enable a gridView. I then used the AJAX animation extender to 'grey out' the GridView while it filtered/rendered. I would recommend doing this if you are filtering large datasets as it makes for a much nicer user experience! :-)
 
Posted by mkm on 7/25/2008 3:35:11 AM
pls sent sourse code
 
Posted by Denis on 8/15/2008 3:28:00 AM
Hi, the article is very good but couldn't have source code. Pls can you send the one.
 
Posted by Kirun on 8/24/2008 11:28:37 PM
Here's a working example for all those who are it desperately. thanks to this link http://forums.asp.net/t/1281414.aspx and person who has written the code i.e ecbruck <%@ page autoeventwireup="true" codefile="FilterWithMultipleDropDownLists.aspx.cs" inherits="GridView_FilterWithMultipleDropDownLists" language="C#" masterpagefile="~/MasterPages/Default.master" title="GridView: Filter With Multiple DropDownLists" %> <asp:content
 
Posted by Bartek on 8/25/2008 2:00:54 AM
Excellent article. I have a similar tutorial with source code here: http://blog.evonet.com.au/post/Creating-a-Stylish-looking-Gridview-with-Filtering.aspx
 
Posted by Jay on 11/19/2008 1:02:57 PM
Any way of filtering with selecting multiple options in the drop downs?
 
Posted by Shweta on 12/3/2008 4:12:40 AM
Good Going, Really Excellent
 
Posted by skpraju on 12/8/2008 6:36:37 AM
Could u Plz mail the Source Code
 
Posted by dusty on 12/22/2008 8:17:50 AM
This article could also assist: http://laymensterm.blogspot.com/2008/12/simple-aspnet-vbnet-database-connection.html
 
Posted by Linto on 1/17/2009 1:25:54 AM
thank you for kind support, realy it very use full
 
Posted by Karthik on 2/3/2009 3:18:05 AM
can u send me a code behind file to my mail id ...
 
Posted by Nirav on 2/18/2009 11:50:15 PM
It's an Excellent. Can you Give me the Code of Filter Shows Like All A B C D E F G H I....and So on. This are the Links to Filter The Grid Data. Thanks
 
Posted by mathabo on 2/25/2009 1:36:18 AM
can you send me the project sample on my mail please
 
Posted by male on 2/25/2009 1:37:39 AM
my mail is malekam@telkom.co.za
 
Posted by CUTTER777 on 3/17/2009 9:16:49 AM
Can you send me the source code as well? cutter@myedgenetwork.com. Thanks!
 
Posted by Francesco on 3/27/2009 1:17:04 PM
Can you send me the source code? Thanks...Thanks...Thanks!!
 
Posted by MB on 4/14/2009 10:14:26 AM
Nice, but I would use LINQ
 
Posted by Lakshman on 4/21/2009 3:39:06 AM
This is nice..... but I have 6 ddl control and I have to filter all the ddl in same way in which 2 values 1 is ALL and and 2nd is any value. could any one tell me the way to filter within 6 ddl control..... plz reply me soon I have done within 5 ddl but statically in procedure
 
Posted by br on 5/21/2009 8:56:02 AM
i dont the hes gonna give us the source codes
 
Posted by jim on 5/21/2009 8:56:26 AM
pleeeeeeeeeease post the source codes
 
Posted by reddy on 5/22/2009 1:48:01 AM
please can you post the entire source code it will be very helpful for the beginners like me .
 
Posted by preethi on 6/14/2009 11:11:33 PM
can u help me, in dropdown listbox how to perform certain functions for eg in student marklist if it is above 80%,above 85% which are the items in dropdown listbox if it is selected corresponding student name list should display, can u post the source code
 
Posted by asha on 6/18/2009 3:07:09 AM
sir please send complete coding.
 
Posted by Hussain on 12/15/2009 12:02:18 AM
Can i get the code for GetAllCustomers()
 
Posted by Sandhya on 2/14/2010 10:21:47 PM
My question is ,There is a grid view with multiple rows and columns .Now I Should able to filter the data in the web form based on user choice.Example say data between 12/12/2008 to 12/01/2009 ,No of customers whose name start with "a'.....etc... Can You Please mail me the code
 
Posted by Caroline on 2/15/2010 7:17:52 AM
Nice article!! Thanks for posting!!
 
Posted by smita on 3/17/2010 11:54:20 PM
code is nice but plz give the privillage to download the full code of this gridview project
 
Posted by ED Kim on 4/8/2010 9:57:50 AM
This is great..just great!! thank you so much.
 
Posted by Nitin Gupta on 4/19/2010 5:04:50 PM
Thanks dude This is such an easy to do article, presented very nicely with a unique way. Hats off to you. Was easy to implement for me as my test app.
 
Posted by sidhartha on 4/29/2010 2:33:00 PM
I am following ur blog to implement dropdownlist filter in the header of the gridview. I need to populate the dropdownwith values as Submit,Approve,Reject & Cancel for which I have wriiten a method named GetStatusNames, which returns a dataset with these values from Oracle baackend.There is also a method named GetStatusDescriptions, which returns a dataset with records specific to status. On page load,I need to display gridviewwith default as All selection from dropdown.Once the user se
 
Posted by Ambrish on 7/1/2010 11:50:17 AM
The Article is awesome....Can you please Email the code....
 
Posted by laxmikant on 8/12/2010 1:36:51 AM
hi ! i want to display the data from database in grid after click on search button as there are two filter option name and email ,plz mail me code for code behind page asap.
 
Posted by Jose on 8/16/2010 8:49:38 AM
Please send me source code
 
Posted by Kiran on 10/26/2010 6:11:21 AM
This article is very interesting..Can you please send me source code
 
Posted by Ashok on 12/1/2010 4:37:45 AM
Can u send me the source code... because the error occur in while assign the fuction " FetchUniqueCustomerType" into datasource.... error - canot implicit convert to 'VOID' to 'OBJECT' ... SO SEND FULL SOURCE CODE...
 
Posted by Pei on 12/17/2010 4:19:09 AM
This is what i need!! Please can you send me the source code as well? Thanks in advance!
 
Posted by slaw p on 12/26/2010 12:47:31 PM
Hi! What about triggers?? Do you use any trigger?? And how and when you define triggers?? Please send me source code too. Please Thanks in advance
 
Posted by CR on 1/3/2011 2:59:12 PM
did anyone ever get the source code? That link above is not valid anymore and I can't get this code to work. Thank you.
 
Posted by Kate on 3/5/2011 1:37:25 AM
Hi! can you please post a source code for this example?
 
Posted by bebo on 3/22/2011 8:57:23 AM
please send me source code ....Thanks so much
 
Posted by MANOJKUMAR on 3/30/2011 10:24:53 PM
Send me the project......
 
Posted by Giridhar on 4/9/2011 9:53:52 AM
Can i get code...
 
Posted by MANOJKUMAR on 5/3/2011 11:18:21 PM
Can U mail this code with database..... I ill work on it and i ill come back to U???
 
Posted by SUNDAR on 12/28/2011 7:50:04 AM
hey bassted. if you post the code,, u will give clear at all...........ok?
 
Posted by svk on 12/30/2011 12:39:08 AM
is the same feature not possible with a header row with column names displayed
 
Posted by cms9651 on 7/21/2012 4:49:55 AM
Can you send me the source code as well? cms9651@gmail.com Thanks!
 
Posted by Prashant Shah on 8/15/2012 4:15:44 PM
Can you please send me the source code prashant.rshah@yahoo.com
 
Posted by Ganeshkumar on 10/1/2012 11:00:47 PM
Excellent article.
 
Posted by Clara Helena Guerrero on 2/21/2013 4:48:16 PM
Hi! Can you please post a source code for this example? thanks!
 
Posted by N on 2/22/2013 12:14:50 AM
can you plz send me the source code nrv6969@gmail.com
 
Posted by Ritu on 8/15/2013 12:50:13 PM
Can you please send me code on my email id
 
Posted by Raghu on 12/19/2013 4:15:33 AM
Could you please send the source code please???
 
Posted by Raghu on 12/19/2013 4:16:16 AM
COuld you please send the source code to my email id please cdraghavendra@gmail.com
 
 Rating & Comments
A word 'Excellent' means lot to the author of this article. You can give comments about this article but not the author.
Rate this Article:
Name:
Email Id:  
We never display your email id anywhere.
Comment/Question: Max. 500 letters
Number Thirty One minus Number One Equals To
 
 
Sponsored by
Web Application Security — How to Minimize Prevalent Risk of Attacks
Programmers Heaven C# School Book - Free 338 Page eBook
The ASP.NET 2.0 Anthology: 101 Essential Tips, Tricks & Hacks - Free 156 Page Preview