Thursday, 2 October 2014

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)

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.

Posted by at
Labels:

10 comments:

  1. Wella's Tech Stuff7 October 2014 at 04:17

    Is there any article jqgrid with grouping and paging

    ReplyDelete
  2. Unknown4 January 2015 at 16:04

    Thanks! For the best example using MVC+jqGrid.

    ReplyDelete
  3. Unknown4 January 2015 at 16:12

    You have a tallant to explain easy about complicated. Good lack with new articles.

    ReplyDelete
  4. dini15 April 2015 at 08:32

    Filter Button is not working..., Please upload new version its very useful to me

    ReplyDelete
    Replies
    1. Tesr15 April 2015 at 10:15

      https://jqgridsearchfilter.codeplex.com/
      Download the sample project..
      thank you..

      Delete
  5. Jateshs100713 August 2015 at 20:01

    Is there any demo related to custom export to excel from jqgrid?

    ReplyDelete
  6. vinyteja18 November 2015 at 18:00

    hi sir small doubt it is work only strongly type html controls or how to html input tag id value pass to server for same serching

    ReplyDelete
  7. mvc developer28 November 2015 at 06:50

    Hi Dileep, it's really useful one, can you give an example how can we show or hide column on UI, i need to get a popup when a click any custom icon, which contains the all the column headers are like checkboxes and i can choose required column and hide remaining

    ReplyDelete
  8. IncodeTech17 January 2018 at 19:32

    It will allow you to truly unleash your potential as a web developer but you need to have a higher level of expertise when it comes to understanding CSS and HTML.

    MVC developer in India

    ReplyDelete
  9. Violet Booth30 March 2022 at 23:02

    Your article is too good and thanks for sharing your article with us. It is very different and unique. I liked how you explained that top developers are confused about the remote work. I am glad you cleared the doubts. One of the best freelancing platforms is, Eiliana.com; they help developers get good work according to their profile.

    ReplyDelete

Subscribe to: Post Comments (Atom)