Filterable Grid for ASP.NET

• Download source - 17.7 Kb

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.