Tuesday, July 31, 2012

Asp.Net jQuery GridView Filter Autocomplete Style

jQuery can be used to perform a dynamic (Autocomplete style) filter on the rows of an Asp.Net GridView control. The Client side Filter operation can be performed by looping through all the rows in the GridView and filtering the text in a specific column whenever the text is changed in the filter TextBox. 



In this example we shall see on how to implement a client side Autocomplete style filter on a GridView control using jQuery. 



Here is the example

<
script type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<link type="text/css"
href="Stylesheet.css"
rel="Stylesheet" />
<script type="text/javascript">
$(document).ready(function() {
//
      // Client Side Search (Autocomplete)
      // Get the search Key from the TextBox
      // Iterate through the 1st Column.
      // td:nth-child(1) - Filters only the 1st Column
      // If there is a match show the row [$(this).parent() gives the Row]
      // Else hide the row [$(this).parent() gives the Row]
      $('#txtID').keyup(function(event) {
            var searchKey = $(this).val().toLowerCase();
            $("#grdEmployee tr td:nth-child(1)").each(function() {
                  var cellText = $(this).text().toLowerCase();
                  if (cellText.indexOf(searchKey) >= 0) {
                        $(this).parent().show();
                  }
                  else {
                        $(this).parent().hide();
                  }
            });
      });
});
</script>   

<tr>
    <td>
        Search ID (Autocomplete):  
        <asp:TextBox ID="txtID" runat="server" Width="100"></asp:TextBox>  
    </td>
</tr>
 
<asp:GridView
   ID="grdEmployee"
   runat="server"
   AutoGenerateColumns="true"></asp:GridView>

Add your logic in codebehind to populate the Grid with data.


Stylesheet.css

.Grid
{
      border: 1px solid #000000;
}
.GridCell
{
    padding: 3px 3px 3px 3px; /* Cellpadding */
    border: 1px solid #000000;
    font-family:Verdana;
    font-size:10pt;   
}
.GridHeader
{
      background-color:#999966;
}
.GridRow
{
    background-color:#ffffcc;
}





Search Flipkart Products:
Flipkart.com

3 comments:

Anonymous said...

Wow..is a great thing i was looking for..thanks for post.
Also, how do you export the filtered rows (2nd and 3rd table in post) to Excel or PDF.

Anonymous said...

i want complete code /... with C# code

Anonymous said...

Thanks to like this... excellent .