Learning jQuery

I had already posted "How to filter GridView records using jQuery" but With continuing my experiments with ASP.NET Grid View and jQuery, In this post I will show you how to search through all columns of ASP.NET GridView Data and show only those data which satisfies the search text. I have implemented it using jQuery so sharing with you.

Related Post:

• Download ASP.NET GridView & jQuery Tips and Tricks eBook PDF

Problem:

First take a look at below image.

As you can see from image, that there is a GridView control populated with data and above that there is a textbox and a button. So the problem was, based on the search text entered in search text box, filter the data from GridView on any of the column . For example, "10" is entered then only those rows should be visible which have 10 in any of the column. It can be in ID, ProductName, Price or quantity column.

Another example, if "L" is entered then below should be the output.

Note: Following controls are placed on the page.

• A GridView
• A Label control which has "No records to display" message.
• And separate link button for each alphabet and one link button for "All".

Solution:

Below are detailed steps to how to do it.

• First, hide the "No records to display" label and also hide all the rows of GridView.

// Hide No records to display label.
$('#<%=lblNoRecords.ClientID%>').css('display','none'); 
//Hide all the rows.
$("#<%=gdRows.ClientID%> tr:has(td)").hide(); 

• Now declare a counter variable, which will be used to display "No records to display" label. And also get the search textbox value.

var iCounter = 0;
//Get the search box value
var sSearchTerm = $('#<%=txtSearch.ClientID%>').val();

• If nothing is entered in search textbox, then display all gridview rows and return from here. You can also do validation to show alert message to user to enter something. But I have used Search button as Reset button as well so when nothing is entered, display all the GridView rows.

//if nothing is entered then show all the rows.
if(sSearchTerm.length == 0) 
{
  $("#<%=gdRows.ClientID%> tr:has(td)").show(); 
  return false;
}
//

• Now run a loop through all the td element of GridView.

//Iterate through all the td.
$("#<%=gdRows.ClientID%> tr:has(td)").children().each(function() 
{
});
//

• Now within the loop get the td value and compare if the td value matches with the search term. If Yes, then show it's parent (that is tr) and increment the counter variable.

//Iterate through all the td.
$("#<%=gdRows.ClientID%> tr:has(td)").children().each(function() 
{
    var cellText = $(this).text().toLowerCase();
    //Check if data matches
    if(cellText.indexOf(sSearchTerm.toLowerCase()) >= 0) 
    {    
        $(this).parent().show();
        iCounter++;
        return true;
    } 
});
//

• Finally, check if counter variable value is equal to 0. If Yes, then display "No records to display" label.

if(iCounter == 0)
{
   $('#<%=lblNoRecords.ClientID%>').css('display','');
}
//

So putting it together the complete jQuery code is,

//Code Starts
$(document).ready(function() {
    $('#<%=lblNoRecords.ClientID%>').css('display','none');

    $('#<%=btnSubmit.ClientID%>').click(function(e)
    {
        // Hide No records to display label.
        $('#<%=lblNoRecords.ClientID%>').css('display','none'); 
        //Hide all the rows.
        $("#<%=gdRows.ClientID%> tr:has(td)").hide(); 
        
        var iCounter = 0;
        //Get the search box value
        var sSearchTerm = $('#<%=txtSearch.ClientID%>').val(); 
        
        //if nothing is entered then show all the rows.
        if(sSearchTerm.length == 0) 
        {
          $("#<%=gdRows.ClientID%> tr:has(td)").show(); 
          return false;
        }
        //Iterate through all the td.
        $("#<%=gdRows.ClientID%> tr:has(td)").children().each(function() 
        {
            var cellText = $(this).text().toLowerCase();
            //Check if data matches
            if(cellText.indexOf(sSearchTerm.toLowerCase()) >= 0) 
            {    
                $(this).parent().show();
                iCounter++;
                return true;
            } 
        });
        if(iCounter == 0)
        {
            $('#<%=lblNoRecords.ClientID%>').css('display','');
        }
        e.preventDefault();
    })
})
//Code Ends

Feel free to contact me for any help related to jQuery, I will gladly help you.