Searchable Gridview using Jquery - Easiest Way

Introduction

This tip will help you in learning how to make the grid searchable at the client side, the search will be accurate and faster irrespective of any datatype since the jquery is used to perform the task.

Background

This tip provides you with the Jquery method which returns the matching grid row on entering the desired search values into the search textbox.

Benefits of using this code are as follows:

• It provides faster search
• Any type of data can be searched throughout the gridview

Using the Code

The code consists of the following.

Jquery method which takes two inputs:

• First is search textbox - txtSearch
• Secondly, the Gridview in which the search is to be done - grd

Let the gridview and search textbox be as follows:

<asp:Textbox runat="server" ID="txtSearch"></asp:Textbox>

<asp:GridView ID="grd" AutoGenerateColumns="false">
<Columns>
    <asp:BoundField DataField="id" HeaderText="id">
    <asp:BoundField DataField="id" HeaderText="id">
</Columns>
</asp:GridView>

Please find out the method for searching throughout the grid as follows:

function SearchGrid(txtSearch, grd)
{
    if ($("[id *=" + txtSearch + " ]").val() != "") {
        $("[id *=" + grd + " ]").children
        ('tbody').children('tr').each(function () {
            $(this).show();
        });
        $("[id *=" + grd + " ]").children
        ('tbody').children('tr').each(function () {
            var match = false;
            $(this).children('td').each(function () {
                if ($(this).text().toUpperCase().indexOf($("[id *=" + 
            txtSearch + " ]").val().toUpperCase()) > -1) {
                    match = true;
                    return false;
                }
            });
            if (match) {
                $(this).show();
                $(this).children('th').show();
            }
            else {
                $(this).hide();
                $(this).children('th').show();
            }
        });


        $("[id *=" + grd + " ]").children('tbody').
                children('tr').each(function (index) {
            if (index == 0)
                $(this).show();
        });
    }
    else {
        $("[id *=" + grd + " ]").children('tbody').
                children('tr').each(function () {
            $(this).show();
        });
    }
}

In the above code, searchGrid(txtSearch,grd) the method is called by passing the textbox in which the search value is entered and the second parameter consists of the grid on which the search is to be carried out.

$(document).on("Keyup",function(){
    SearchGrid('<%=txtSearch.ClientID%>','<%=grd.ClientID%>');
});

Points of Interest

The above code is the simplest way to carry out a search through the gridview It can be used for searching any type of parameter, whether,datetime integer or string and since it is carried out on the client side, the search is very fast as compared to the other search.

Thank you very much for reading!! Please vote if you found it helpful!