Sections 1 & 2: ASP.NET MVC-4, Entity Framework and JQGrid Demo with simple Todo List WebApplication
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:
- Client Side Search functionality (Built in JQGrid Feature).
Video: https://www.youtube.com/watch?v=5w2ycpN2jss
- 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.