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>
<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
.GridRow
{
background-color:#ffffcc;
}
3 comments:
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.
i want complete code /... with C# code
Thanks to like this... excellent .
Post a Comment