How to implement search on jqgrid?

Question

So I've got basic example of jqgrid working in ASP.NET MVC, the javascript looks like this:

    $(document).ready(function() {

        $("#list").jqGrid({
            url: '../../Home/Example',
            datatype: 'json',
            myType: 'GET',
            colNames: ['Id', 'Action', 'Parameters'],
            colModel: [
                   { name: 'id', index: 'id', width: 55, resizable: true },
                   { name: 'action', index: 'action', width: 90, resizable: true },
                   { name: 'paramters', index: 'parameters', width: 120, resizable: true}],
            pager: $('#pager'),
            rowNum: 10,
            rowList: [10, 20, 30],
            sortname: 'id',
            sortorder: 'desc',
            viewrecords: true,
            multikey: "ctrlKey",
            imgpath: '../../themes/basic/images',
            caption: 'Messages'
        });

Now I am trying to implement the search button that they have in the jqgrid examples (click on Manipulating/Grid Data). But I don't see how they implement it. I'm expecting e.g. a "search:true" and a method to implement it.

Has anyone implemented search on jqgrid or know of examples that show explicitly how to do it?

Answer 1

I recently implemented this myself (yesterday actually) for the first time. The biggest hurdle for me was figuring out how to write the controller function. The function signature is what took me the longest to figure out (notice the _search, searchField, searchOper, and searchString parameters as those are missing from most of asp.net mvc examples I've seen). The javascript posts to the controller for both the initial load and for the search call. You'll see in the code that I'm checking whether the _search parameter is true or not.

Below is the controller and the javascript code. My apologies for any formatting issues as this is my first time posting on here.

public ActionResult GetAppGroups(string sidx, string sord, int page, int rows, bool _search, string searchField, string searchOper, string searchString)
{
    List<AppGroup> groups = service.GetAppGroups();
    List<AppGroup> results;
    if (_search)
       results = groups.Where(x => x.Name.Contains(searchString)).ToList();
    else
       results = groups.Skip(page * rows).Take(rows).ToList();

    int i = 1;

    var jsonData = new
    {
        total = groups.Count / 20,
        page = page,
        records = groups.Count,
        rows = (
            from appgroup in results
            select new
            {
                i = i++,
                cell = new string[] {
                         appgroup.Name,
                         appgroup.Description
                     }
            }).ToArray()
    };

    return Json(jsonData);
}

And here is my HTML/Javascript:

$(document).ready(function() {
  $("#listGroups").jqGrid({
    url: '<%= ResolveUrl("~/JSON/GetAppGroups/") %>',
    datatype: 'json',
    mtype: 'GET',
    caption: 'App Groups',
    colNames: ['Name', 'Description'],
    colModel: [
        { name: 'Name', index: 'Name', width: 250, resizable: true, editable: false},
        { name: 'Description', index: 'Description', width: 650, resizable: true, editable: false},
    ],
    loadtext: 'Loading Unix App Groups...',
    multiselect: true,
    pager: $("#pager"),
    rowNum: 10,
    rowList: [5,10,20,50],
    sortname: 'ID',
    sortorder: 'desc',
    viewrecords: true,
    imgpath: '../scripts/jqgrid/themes/basic/images'
//});
}).navGrid('#pager', {search:true, edit: false, add:false, del:false, searchtext:"Search"});

Answer 2

See my article on codeproject, which explains how we can do multiple search in jqgrid:

Using jqGrid’s search toolbar with multiple filters in ASP.NET MVC

I use IModelBinder for grid's settings binding, expression trees for sorting and filtering data.

Answer 3

In case you're still wondering about dealing with optional parameters, just declare them as nullables by adding a ? after the type name.

Now you'll be able to compare them with null to check if they are absent.

Note that you don't need to do this with strings, as they are already nullable.

Answer 4

@Alan - ok, I used your method and extended my webservice to expect those additional three parameters and check for "_search" is true/false. But, in order to make this work, I had to add this to my ajax call in the JavaScript:

if (!postdata._search) {    
           jQuery("#mygrid").appendPostData( {searchField:'', searchOper:'', searchString:''});  
}

Answer 5

Just follow this link. It has all implementations explained...

You can create a button searchBtn and can invoke search form on click

$("#searchBtn").click(function(){
   jQuery("#list4").searchGrid(
   {options}
    )});