ASP.NET GridView Ajax Data Filter Control

UPDATE: new release of the control found here

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:

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
Anonymous 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
Anonymous said…
Ammar,
First and foremost, Thanks and great job. Got it up and running with no problems. My only question is how I can get it to work with "Select" option enabled on my GridView? Filter works great alone but If I "select" a row after I filter my detailsView(on the same page) goes out of sync.

Does Version2 fix this?

Thx Again
Be Well
-Zack
Ammar Tawabini said…
Zack basically what happens in your case is normal, whenever you select a row, the page will be posted back partially to the webserver. now unless you call the method to apply the filter again once your row is selected the data won't be filtered.. that happens also when you Sort or on page index change.. so on row selected event you have to call FilterDataSource() again or whatever you named the callback method.. hope it will work this time.

regards,

Ammar
Anonymous said…
Hi Ammar:
Trying to get sorting to work by applying the advice you gave to the first poster on your site. I attempted to call "TableFilter_OnRefreash();" method within the GridView_Sorting Event...with no luck.

I get "tableFilter_OnRefresh Does not exist in this context"

any idea's
New to C# thanks for any help
-A
WaReZwEzA said…
Salam Ammar

Thanks for the wonderful control. I got a problem filtering date.

When I select >, instead of displaying date > value it will filter date < value.
neilgj said…
Hi, I love your code but I'm having a problem:
The filtering is backwards - so if I filter on cValue > 100 what I actually get is a list with cValue less than 100. Same in reverse. Equals and not-equals work fine.
I'm using my oen data and I converted app_code/filter to vb as I have other vb classes.
Any advice?
NEIL
Ammar Tawabini said…
you can just change that, because I am using the control on right to left content so just assign a CSS class "lefttoright" to the drop down list as the following
//CSS file
.lefttoright
{
direction:ltr;
text-align:left;
}

//Drop Down List Class

ddlName.Class = "lefttoright";
neilgj said…
Ammar, Thank you for the advice - in fact I just commented out lines 184 & 324 in DataFilter.ascx.cs - works fine now. Many thanks again. NEIL
Nuno said…
Hi Ammar, I really like this control but I'm having some problems because I can't really use it.

In VS2008 it gives me this error:

Parser Error Message: The base class includes the field 'TableFilter1', but its type (Tawammar.CustomControls.TableFilter) is not compatible with the type of control (ASP.tablefilter_ascx).

Line 18:

Can you give me a hint? This happens with the new version DataFilter, and with the old version, TableFilter.

Thanks2tche
Nuno said…
Nevermind, I was using a WebApplication instead a WebSite. Thanks anyway
Mike Welch said…
Thanks for posting this control! I added it to an ASP.NET web application. For anyone else doing the same, don't forget to convert the control to a web application (which adds the designer file). For some reason unknown to me, I had to add a new class and copy the filter code in, to get it to work. This is the first user control I have used, so I may have done something wrong. I also modified it to include template fields, works great. Nice job on this, and thanks again.
Robson said…
Hi Ammar
Very good work. I have one question. Gridview has few invisible columns and ddl is showing them. How can I hide those columns?
Anonymous said…
How do install this thing into my toolbox?
Anonymous said…
Ok i got it to work but it doesnt work so hot on comparing datetime
Anonymous said…
It keeps throwing an exception when trying to apply a filter on a DateTime column...how do I work around this?
Harjinder said…
I have a problem with the gridview filter and I was hoping you could help:


To recreate ...

Add two gridview filters

[Remove] first filter item

add a new filter item (doesn't seem to matter which one) using [AND] ([OR] behaves the same)

The screen seems to refresh, but the new filter criteria don't apply.
Peter said…
can you assist with converting to vb.net?

DataFilter1.OnFilterAdded += new DataFilter.RefreshDataGridView(DataFilter1_OnFilterAdded)
Ammar Tawabini said…
Hey Peter please check out the updated control under this link http://ammar.tawabini.com/2010/09/gridview-ajax-filter.html
B-Coder said…
Hi Ammar,
Thanks for such a nice piece of code. I was searching for it.
I have one problem, i am working on windows forms, so can you please suggest me the windows forms version. I need that very much.
If you will help me i will be very thankful to you.

Thanks
Alex Schatten said…
Hi Ammar

Try to convert this to VB
How must i handle this line

DataFilter1.OnDataBound += New DataFilter.BindDataGridView(AddressOf DataFilter1_OnDataBound)

Best Alex
Susan Augustine said…
my filters are not adding, when i click the button, nothing happens
Ammar Tawabini said…
please use the new version mentioned at the beginning of the post
Ammar Tawabini said…
please use the new version mentioned at the beginning of the post
Susan Augustine said…
i am still having the same issue. does the web.config file only relates to ajax. because i have ajax already and i am not doing anything with your web.config file
This comment has been removed by the author.
Cagmac said…
Hi Ammar
In my case the gridview columns doesn´t appear in the dropdownlist
Cagmac said…
Can you help me with your code?

Popular Posts