In this article I will explain with an example, how to implement Column-Wise search on WebGrid records on Client Side using jQuery in ASP.Net.
The Client Side search will be a Column-Wise search i.e. each column of WebGrid will have a TextBox and the rows will be searched and filtered as the user types in the TextBoxes.
The Client Side Column-Wise search will be the jQuery QuickSearch Plugin.
 
 
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Download and install Northwind Database
 
 
Creating an Entity Data Model
The very first step is to create an ASP.Net MVC Application and connect it to the Northwind Database using Entity Framework. For more details please refer my article ASP.Net MVC: Simple Entity Framework Tutorial with example.
Following is the Entity Data Model of the Customers Table of the Northwind Database which will be used later in this project.
Client Side Column-Wise Search in WebGrid using jQuery in ASP.Net MVC
 
 
Controller
The Controller consists of the following Action method.
Action method for handling GET operation
Inside this Action method, the records from the database are fetched using Entity Framework and are returned to the View.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        NorthwindEntities entities = new NorthwindEntities();
        return View(entities.Customers.Take(10).ToList());
    }
}
 
 
View
Inside the View, in the very first line the Customer Entity is declared as IEnumerable which specifies that the Model will be available as a Collection.
The WebGrid is initialized with the Model i.e. IEnumerable collection of Customer Entity class objects as source.
Note: For more information on usage of WebGrid, please refer WebGrid Step By Step Tutorial with example in ASP.Net MVC.
 
Applying the QuickSearch Plugin for Column-Wise Client Side search
Inside the jQuery document ready event handler, first the WebGrid Header row is referenced and cloned using jQuery.
Then to the cloned Header row, TextBoxes are added with a specific class name.
Finally the TextBoxes are referenced using the class name and the jQuery QuickSearch Plugin is applied to each TextBox.
@model IEnumerable<Customer>
 
@{
    Layout = null;
    WebGrid webGrid = new WebGrid(source: Model, canPage: false, canSort: false);
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
 
        .Grid
        {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
 
        .Grid th
        {
            background-color: #F7F7F7;
            font-weight: bold;
        }
 
        .Grid th, .Grid td
        {
            padding: 5px;
            border: 1px solid #ccc;
        }
 
        .Grid, .Grid table td
        {
            border: 0px solid #ccc;
        }
    </style>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        @webGrid.GetHtml(
                htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
                columns: webGrid.Columns(
                         webGrid.Column("CustomerID", "Customer Id"),
                         webGrid.Column("ContactName", "Customer Name"),
                         webGrid.Column("City", "City"),
                         webGrid.Column("Country", "Country")))
    }
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="~/scripts/quicksearch.js"></script>
    <script type="text/javascript">
        $(function () {
            //Reference the Header Row and append another Row.
            var row = $("#WebGrid thead").append("<tr />");
 
            //Loop through all Header Cells.
            $($("#WebGrid thead th")).each(function () {
                //Clone the Header Cell.
                var th = $(this).clone();
 
                //Copy the Cell Text.
                var text = th.html();
 
                //Clear the Cell Text.
                th.html('');
 
                //Create dynamic TextBox. Set the Cell Text in PlaceHolder.
                var textBox = $("<input type='text' class = 'search_textbox' placeholder = '" + text + "' />");
 
                //Append the TextBox to Header Cell.
                th.append(textBox);
 
                //Append the Cloned Cell to the newly created Header Row.
                row.append(th);
            });
 
            //Loop through all Search TextBoxes and apply QuickSearch plugin.
            $('.search_textbox').each(function (i) {
                $(this).quicksearch("#WebGrid tr:not(:has(th))", {
                    'testQuery': function (query, txt, row) {
                        return $(row).children(":eq(" + i + ")").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;
                    }
                });
            });
        });
    </script>
</body>
</html>
 
 
Screenshot
Client Side Column-Wise Search in WebGrid using jQuery in ASP.Net MVC
 
 
Downloads
Download Code