GridView Multiple Filter AJAX Control

• Download source code - 193 KB
• Download latest source code from here

Introduction

This AJAX control enables the user to filter data within any column inside a GridView. The user can add multiple filters and can delete existing ones too.

Source Code and Video

I have uploaded the source code and a Flash video on how to use the control inside your web application, on my blog. To run the video, you have to have the Flash plug-in in your browser. Drag and drop the SWF file inside your browser and it will run: http://tawatech.blogspot.com/2008/06/aspnet-datagridview-ajax-data-filter.html.

Background

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

Using the Code

To use the control is very straightforward:

1. Add web.config AJAX tags to enable AJAX in your website:







2. Drag and drop the filter control in your page. (Note: the control already has the AJAX UpdatePanel and ScriptManager, you don't have to create a new UpdatePanel for the control.)

   

3. Drag and drop an UpdatePanel for the GridView.
4. Place the GridView inside the AJAX UpdatePanel and specify the SQLDataSource for it.



Note: The control already has a ScriptManager, so you don't have to create one in your ASPX page.

5. On Page_Load, specify the DataSource and DataColumns for the filter control and specify the event handler method that will be called after adding or removing the filter.



6. Calling the control method FilterDataSource() in the event handler tableFilter_OnRefresh() will apply the filter on the SqlDataSource1 that you have assigned to the GridView.