Thursday, June 12, 2008

ASP.NET GridView Ajax Data Filter Control

I was looking for an ASP.net 2.0 custom control that enables the user to filter the data in a GridView control by adding filters to the GridView. The control can be found in applications such as Microsoft BI Studio. So I decided to develop a web based control that will do such thing.

note:
1-ASP.NET Ajax Extensions must be installed in your VS.NET evironment.
2-GridView must be placed inside Ajax UpdatePanel.
3-You don't have to add ScriptManager inside your aspx page since the control contains one.
4-In case your page has a ScriptManager, you can delete the one inside the custom control.

Here are some pictures demonstrating the use of the control:




Here is the demo of the custom control:

If you would like to download the high resolution flash video you can download it from here:

The source code for the control is available here:



update: I uploaded a newer version of the control.
Current version:
1- Adding a session field to the control to enables the user to use the control on any page at the same time, or on the same page with multiple GridView controls.
2- And / Or operators between filters.
3- search for multiple keyword in the same filter by adding a semicolon after each keyword.
4- Adding new filters programmaticaly.

Screenshot:




Example + Source Code:

26 comments:

Chrysa said...

Hello Ammar:
this is a wonderful little chunk of stuff you've made... can you tell me, how would I persist the filter if the grid is paged (and there would be several pages)??

Thanks!

Ammar Tawabini said...

thanks Chrysa,
actually all you have to do is to call the event handler method tableFilter_OnRefresh again within GridView_PageIndexChanged event handler.

Same thing goes for sorting, just call the the event handler method within GridView_Sorting event handler.

Anonymous said...

tHello Amar,
Very good article, can you tell me how can i apply this filter to a gridview which is populated from code behind using a method.
Cheers, Shilpa.

LaRiZ said...

Hi Ammar,
Your article helps me doing my schoolwork. I hope you don't mind if I put you as a reference. Thank you so much. Keep up the good work! ;)

Ammar Tawabini said...

Hey Shipla,
At the run time just pass the SqlDataSource to the control and call the control method FilterDataSource()
and after that call the DataBind() method from your GridView

jhfelectric said...

Hi,
Very good work, thx for sharing.
Would it be possible to persist the filters even in edit mode? i.e. the user filters his grid, then wants to edit/save/delete the nth visible row in the filtered grid...
Thanks for your help.
Julien

Rem said...

Your blog is very nice...
visit my blog asp.net example

blackonja said...

Hi Ammar,

i,m wondering can we use this wonderful filter with gridview which autogeneratecolumns property is set to true and without bound fields?

Thx,
BJ

Jen said...

The blog is helpfull...
visit also asp.net [c#]

Sameer Alomari said...

Dear Ammar,
Do you have a VB.NET version of the same code?

I really need it..

If you do please send it at sameer.alomari@gmail.com

Thanks in advance...
Best Regards...
Sameer Alomari

Iván said...

Hi Ammar,

For Windows Forms guys that use DataGridView, you may also find this dynamic filtering interesting:

http://www.dotneat.net/2008/12/03/DynamicDataGridViewFilteringInC.aspx

Anonymous said...

Hi Ammar
this is good example
can u please help me ho to update gridview values in ajax
this is my email
wascom_82@yahoo.com
thanks in advance

Anonymous said...

Hi Ammar,
Great Job.
I need your help to include "between" clause for ddlColumnOperation which is needed for date criteria and etc. Can you please throw some light on this as what should be done to achieve this.

Anonymous said...

Great tool. Just be sure your GridView columns are specified under > Design View > Gridview Tasks (little arrow on gridview) > Edit Columns > Selected fields should list all your columns and auto-generate fields shouldn't be checked. Tool won't work w/ auto-generated columns.

Ammar Tawabini said...

this version of the control only works with Auto Generated Columns, but i did lots of modifications on the control to be able to specify your own columns to do the filtering on, another feature i added that after adding the first filter, you can specify the operators AND or OR before adding the other filters

Ammar Tawabini said...

to do "between dates" filtering, you can add the following two filters:

Date > 2/2/2009
Date < 4/7/2009

Anonymous said...

Hello Ammar,

I'm not yet adept with VWD, but not quiet a newbie. I'm excited about this tool, but am having some difficulty.

When I try to add TableFilter.ascx to the Default page, there is an error on the updatePanel - "Error Rendering Control. An unhandled exception has occurred. Specified method is not supported." Can you help identify the cause?

Thank you - JC

Ammar Tawabini said...

Just make sure your website supports Ajax extensions and you have already added the Ajax assembly to your project and configured your web config file. Also make sure that the control is correctly registered in your aspx page.

regards,
Ammar

Steve Holzer said...

Has anyone attempted to use this concept for a ListView Control? If such a thing exists, let me know.

Thanks!

Anonymous said...

Great control. I wasn't sure how to do this on the same page for multiple gridviews so I created two table_filter_controls for each gridview. My scenario is I have 2 panels with a gridview in each panel. depending on the view that is selected depends on the which panel is displayed and from there which filter is displayed. Not sure if you know how to use the same control for both gridviews.

My next question is the more important one is how do I create a button to clear all filters being applied?

Ammar Tawabini said...

guys I am gonna upload my next version of the control, it supports adding filters from the code plus using the filter for more than gridview on the same session by providing a Unique SessionID to the control on each page or on the same page for multiple Filter Control, plus adding the ability for adding AND or OR after each filter

Angel said...

Ammar,

Great control, I'm eagerd of seeing the upcoming next revision of this great filtered ajax gridview.

Do you have an expected release date?

Satish Kotian said...

Ammar,
Thanks for a wonderful piece of functionality. I tried your example but keep getting the below error. I am new to asp .net can you help me out.

Satish

My namespace and virtual directory is BPASEnrollmentRules. Filter.cs is in this directory as well as TableFilter.ascx and TableFilter.ascx.cs. I am using visual studio 2008.

The base class includes the field 'TableFilter1', but its type (BPASEnrollmentRules.TableFilter) is not compatible with the type of control (ASP.tablefilter_ascx).

Anonymous said...

Dear Ammar:
thanks for your great and nice control, but i have problem to use paging on the gridview, and also to count the return row number of the gridview. Can you help to point a wany for that?

Craig said...

Fantastic control!, I made some modifications so I could get it to work with my ObjectDataSource.
Now I want to figure out a way to generate drop down lists for those foreign keys in my table.
Keep up the good work!

I wish I could delete those spammer posts...

RRave said...

Invitation to new programming Resources Website



Dear Sir,

I hope you are doing well. I got this email address from one of your contribution web site. I have launched a web site www.codegain.com and it is basically aimed C#,JAVA,VB.NET,ASP.NET,AJAX,Sql Server,Oracle,WPF,WCF and etc resources, programming help, articles, code snippet, video demonstrations and problems solving support. I would like to invite you as an author and a supporter.
Looking forward to hearing from you and hope you will join with us soon.

Thank you
RRaveen
Founder CodeGain.com