GridView Multiple Filter AJAX Control
An AJAX control to filter data in a GridView control by adding filters to the GridView at runtime.
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:
- Add web.config AJAX tags to enable AJAX in your website:
- Drag and drop the filter control in your page. (Note: the control already has the AJAX
UpdatePanel
andScriptManager
, you don't have to create a newUpdatePanel
for the control.) - Drag and drop an
UpdatePanel
for theGridView
. - Place the
GridView
inside the AJAXUpdatePanel
and specify theSQLDataSource
for it. - On
Page_Load
, specify theDataSource
andDataColumn
s for the filter control and specify the event handler method that will be called after adding or removing the filter. - Calling the control method
FilterDataSource()
in the event handlertableFilter_OnRefresh()
will apply the filter on theSqlDataSource1
that you have assigned to theGridView
.
Note: The control already has a ScriptManager
, so you don't have to create one in your ASPX page.