Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

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

0.00/5 (No votes)
3 Oct 2014 2  
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

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here