HTML Web Grid - How to filter the records using a text box.

In this tutorial, we will go over how to filter a web grid based on an input from a text box. Before getting started, I will be using my earlier tutorial on Web Grid. In that tutorial, I used web service to invoke data from Northwind to display category id, name description etc within a grid.

   Now I will use the same data to filter it based on user input. I will add a textbox and a search button on top of the grid, that will drive the data source to the web grid.

This is my existing screen.

Once I add the new UI elements in this view, this is how my new screen will be...

I had moved my grid to a separate partial view to ease the process of reloading data. I created a new view named "gridview.cshtml" and included the code as given below...

In this view, I had defined an attribute as id using htmlAttributes property. I will be referring this id to display the refreshed data after filtering from existing source.... (I am reusing styles for this grid from various other web sites). Once this is defined, we can start working on UI filter elements and button search click event to do the rest.

I will use a div tag to enclose filter search and the partial view for grid. Below is the code to implement them.

In the above code, I will be displaying the grid through @Html.Partial by passing in the partial view name as the parameter.  By isolating the view to be refreshed, it will help us to re-load it many times, without affecting the other parts of UI.

  Remaining part with the UI will be to write the search click event, before we get into the controller part of the code. Lets write the search event by making an ajax call to the controller method with the parameter value and do a filter on it.

In the above code, I am making a call to my controller method TestPage_Filter, which would fetch the data for web grid without filtering it (by doing it this way, you could use the same code while loading the page too avoiding redundant code). Whatever is entered into the text box will be retrieved for filtering and passed in through the data option. Here we are retrieving the search criteria and storing it in a variable called srchitem. Same will be passed on to the controller on click of the button. On successful completion of process,  the returned data is now loaded into the grid through the grid's id, using .html(result).

This being done, we are totally done with the view side of it. In controller, I had done the same steps for loading the initial grid data and storing it in an IEnumerable<CategoryData> variable. Once I have it there, I use linq to objects to filter my data based on the entered text. Below is the code to retrieve my grid list and filter it.

In the above code, txtval is the parameter passed to the controller method. Here I am doing a filter based on CategoryDescription field, similarly you can do the same for other fields too. Or even better, have a drop down selection in UI and get users response to know, based on which field criteria, it is being searched.

Once I have the filtered list, I will loop through my data model object to map it to my grid elements as below.

If you refer the code above, you can see that the view, I am returning is gridview (the one that contains the grid) along with the filtered data. This data will be associated with the grid and re-loaded. Final view after filtering should be like this....

Happy coding......