GridView Ajax Filter

Upon users’ requests to enhance the GridView Ajax Filter control, I made some changes to the control to allow more flexibility and functionality to it. I will discuss all the features of the control and how to use it on your project. P.S. I am using Visual Studio 2010 for the current demo.
Features:
1. More operations have been added “=, LIKE, NOT LIKE, <>, >, <, >=, <=”:
clip_image002
2. Search for multiple keyword in the same filter by adding a semicolon after each keyword:
clip_image004
3. Updating the filter (Column , Operation, or Keyword) without removing it:
clip_image006
4. Adding multiple filter with AND / OR operation between them:
clip_image008
5. Adding dynamic date values to the keyword:
“For this example I am selecting all the products that have been created 8 months from today’s date using this value { t - m(8) }”. t: today, m:month
clip_image010
6. The filter for each page will be stored throughout your session, so you don’t have to re-create the filter if you visited another page then came back to the filtered page again.
How to Use:
- Create a new ASP.NET Empty Web Application and name it DataFilterDemo
clip_image012
- Drag and drop the following files from DataFilter folder to your project “DataFilter.ascx, DataFilter.ascx.cs, and Filter.cs” (Can be found in the attached file below)
clip_image014
- Right-click on your project and click on Convert to Web Application
clip_image016
-Right-Click on your project and click on Add -> New Item… -> Web Form then name it “Default.aspx”
clip_image018
- From Solution Explorer drag DataFilter.ascx control to the design view of Default.aspx Page.
clip_image020
- Add Script Manager and Update Panel to the page.
clip_image022
- Add new GridView inside the Update Panel “UpdatePanel1” to the page and just keep the name as “GridView1” for demonstration proposes.
clip_image024
- Expand GridView Properties and add new Sql Data Source
clip_image026
clip_image028
- Choose your database connection and configure the SELECT data for your GridView
clip_image029
clip_image031
clip_image033
clip_image035
clip_image037
- If you want, change columns’ names to whatever names you like.
- Right click on the page and click View Code
clip_image039
- Inside Page_Load function, add the following code:
clip_image041
- Add a new Event Handler function to handle the call back from the control:
clip_image043
- Done, press F5 to debug and run your application
Please note the following:
- Date format must be as dd/MM/yyyy to be able to filter the column or you can change that by re-write the part of Filter.cs that handles the date format.
- To Implement Sorting and Paging when the filter is applied call the Event Handler “DataFilter1_OnDataBound()” on the following Events of GridView “Sorted” and “PageIndexChanged”


Source Code & Demo

Comments

Peter said…
Hi Ammar,

Thank you for the update, have a problem with large datasets. get unhandled exception when adding a filter.
Anonymous said…
Perfect for what I'm looking for. Unfortunately, I must use reportviewer so am limited to vwd 2008.
I can get this demo to work in .net framework 4 in vwd 2010, but not vwd 2008 under 3.5.

Since I use vwd 2008 under 3.5, is there a way to configure to work in that framework?

Newbie asks? :)
Bharathkumar said…
Hi Ammar

Thanks for your update.

I get error "Could not load type 'DataFilterDemo.DataFilter'".

Also, can I use this if the AutogenerateColumn is false, meaning I have my own query to populate gridView and databind from codebehind?
Bharathkumar said…
Hi Ammar

It is now working like a champ!!!

The mistake was, trying to build query from code behind and assign dataset to the DataFilter. But the DataFilter is always expecting (DataFilter1.DataSource = SqlDataSource1) a DataSource.

I changed my code to fit the UserControl and its working correctly.

Thank you for your wonderful code :)
Black- 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
Black- 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
Vic said…
Really nice control! Thanks a lot.

Just one query. Any idea how to group then concatenate filters?

Ie. where (x > 5 AND y < 100) OR (x > 10 AND y >100) AND (z > 3)
Fitim Durmishi said…
Hi Ammar,
it is working perfect in simple ASP.NET sites.
My question is this: is it possible to use and what are the needed configs to use the control inside SharePoint 2010 visual web parts.
Hello Ammar,

Your solution is great and it work. The only problem I have is that I have a CommandField that triggers an method on "selectedIndexChanged". The CommandField is there to export data to excel. When I attempt to click the button after the OnSelectedIndexChanged doesn't get triggered.

Am I missing or need to add more to regain the "OnSelectedIndexChanged" ?
Tsukasa said…
This comment has been removed by the author.
jgoeke said…
Can someone send a link to the source code? I cannot find it. Thanks!
Tsukasa said…
I can't seem to get it to populate columns. All of my columns are asp:TemplateField. How do
I correct this?
Tecka said…
This comment has been removed by the author.
Tecka said…
This comment has been removed by the author.
Yedhukrishna M said…
Cant see the download link working.. pls some one post the download link
AAA said…
Hey! thanks for nice and smoothly working gridview filter control.
How can i use this on gridview for AutoGenerateColumns false .. any idea
Hello Ammar,
your solution sounds pretty interesting and helpful; however the "Source Code & Demo" link does not work. Could you please provide me a working link for source code?
Thx and BR,
Alessandro

Popular Posts