Section 3: JQGrid and MVC Demo with Custom Filters or Search Functionality

Sections 1 & 2: ASP.NET MVC-4, Entity Framework and JQGrid Demo with simple Todo List WebApplication

• http://www.codeproject.com/Articles/801895/Asp-Net-MVC-Entity-Framework-and-JQGrid-Demo-wit

Section 3: JQGrid and MVC Demo with Custom Filters or Search Functionality

Overview

Let us see how to implement the Custom Filters or Search functionality in "TodoList JQGrid MVC sample application".

Source Code

You can download the source code from https://jqgridsearchfilter.codeplex.com.

Search functionality in JQGrid can be implemented in 2 ways:

1. Client Side Search functionality (Built in JQGrid Feature).

   Video: https://www.youtube.com/watch?v=5w2ycpN2jss

2. Server Side Search functionality (Custom Filters)

   Video: https://www.youtube.com/watch?v=gPMwsC1PBFA

1. Client Side Search Functionality (Built in JQGrid Feature)

There are 2 steps to implement the JQGrid Built in Search functionality from the client side.

Step 1: Add "loadonce" property to JQGrid and set it to true.

Step 2: Set "search" property to true in navGrid method.

Note: Disadvantage of using this approach is pagination functionality will be disabled, since "loadonce" property is set to true. So we have to load all the records at once. And the search functionality will be performed by the JQGrid on the Client side itself.

2. Server Side Search Functionality (Custom Filters)

• Set "loadonce" property to false present in the "TodoList.js" file.
• Open TodoList "Index.cshtml" page and add the required filters.

  

  

• 3 fields, namely Task Name, Severity and Target date is added has a filter.
• 1 Search button is added for filtering the data.
• A class with name "filterItem" has been added in all the 3 fields.
• Open "TodoList.js" page.
• Add a jquery click functionality in Document.Ready Function() to post the filter values to the controller and reload the JQGrid.

  

• Open "TodoListController" and add additional required filter parameters.
• Also handle the Searchfunctionality with the help of Linq Queries based on the condition, i.e., value present in the parameters that are received.

  

• So finally, we have implemented the custom search functionality on the server side.