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".

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 record 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" is 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 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.