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

Hi Edward Tanguay,

Just follow the link given below. It has all implementations explained ...

link text

You can create abutton "butt" and can invoke search form on click

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

Answer 2

Edward,

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"});

I'm sure there are some spots that need to be cleaned up, but this should help you get going. Hope that helps!!

Answer 3

@Alan - this is in the direction of what I'm looking for...however, I've got a question. How do you deal with this when it is NOT a search? Are you not getting errors about expected parameters that aren't being sent? When there is not any searching going on, the searchfield, searchoper and searchstring aren't sent in the JSON post. How do you avoid this being a problem?

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:''});
}

Thanks for the help!

Answer 5

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 6

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 7

Hello,

check if you have included the jquery.searchFilter.css

Answer 8

hey Alan, Thanks for your helping. I'm sure many people with the same problem.