Introduction

This article presents an ASP.NET DataGrid with ability to filter based on column values.

Details

I tried to keep the code simple. This code uses JavaScript method filtergrid to build QueryString for the URL. The datasource is filtered based on QueryString values.

 // this method sets the filter condition.
function filtergrid(columnname)
{
  var val;
  var baseurl;
  
  // I have set the baseurl of the demo page here.
  // You can simply replace it with your .aspx page name
  // or may be read programmatically
  // to make this control generic.
  baseurl = 'FilterGridPage.aspx';
  val = document.getElementById('txt' + columnname).value;
  
  self.location.href = baseurl + '?selectedcolumn=' 
                   + columnname + '&selectedvalue=' + val;
}

In the code-behind file, the FillDataGridColumns method creates the column headers with HTML textbox and button.

   '// header cell code
   headerhtml = DisplayNames(i)
   
   '// create html text
   headerhtml = headerhtml & " <br> " & " & _
   "<Input type=text class=FilterTextBox id=txt" & ColumnNames(i) & " /> " & _
   "<Input class=ButtonStyle type=button id=btn" & ColumnNames(i) & _
   " onclick=""javascript:filtergrid('" & ColumnNames(i) & "');"" value='Go'/>"
   
   '// simply set the html text as HeaderText property of BoundColumn
   <BoundColumnVariable>.HeaderText = headerhtml

Scope of further development

At present, this control handles String and Double datatypes only. It can be modified to handle other datatypes.
Filter works on single value only and can not search for multiple values.

All your suggestions and comments are welcome.

Conclusion

The use of basic JavaScript and code-behind file helps to enhance the functionality of the DataGrid control.