I’ve often found that our client’s web portals have way too much data on screen, so here’s a quick and easy “Filter as you type” JavaScript/jQuery block:
function SetupFilter(textboxID, gridID, columnName) {
$('#' + textboxID).keyup(function () {
var index;
var text = $("#" + textboxID).val();
$('#' + gridID + ' tbody tr').each(function () {
$(this).children('th').each(function () {
if ($(this).html() == columnName)
index = $(this).index();
});
$(this).children('td').each(function () {
if ($(this).index() == index) {
var tdText = $(this).children(0).html() == null ? $(this).html() : $(this).children(0).html();
if (tdText.indexOf(text, 0) > -1) {
$(this).closest('tr').show();
} else {
$(this).closest('tr').hide();
}
};
});
});
});
}; |
Then all you need to do, after you include the above code segment in your page head or startup .js file is to call the below for each textbox you want to actively filter your grid:
$(function () { SetupFilter("myTextBox", "myGridView", "My Column Name"); }); |
Just make sure you reference your controls with the correct ID. By using ClientIDMode=”Static” you can ensure it’s the same ID as you defined it in the ASP.NET markup.
<asp:TextBox ID="myTextBox" runat="server" ClientIDMode="Static" />
<asp:GridView ID="myGridView" runat="server" AutoGenerateColumns="False" ClientIDMode="Static"
ShowHeaderWhenEmpty="True">
<Columns>
<asp:BoundField DataField="one" HeaderText="My first column" />
<asp:BoundField DataField="two" HeaderText="My Column Name" />
</Columns>
</asp:GridView> |
You can even include the textbox as template fields in the grid header.
Make sure you are making use of jQuery libraries in order for this to work.