Add own search parameter in jqGrid in Asp.net mvc

Question

I have just started working on asp.net mvc and jqgrid.

I have a calendar which returns a date, a multiselect list box and apply filter button outside of the grid. Is there a way to pass these filter values to the server-side actionresult GridData() based on the selected date and multiple selected values and also it persist while paging or sorting.

public ActionResult GridData(string sidx, string sord, int? page, int? rows, Collection categoryOptions,string fromDate) {..}

Thanks!

You can store filters in session and apply them with every asynchronic data request. — LukLed, Apr 20 '10 at 11:08
The issue with storing filters in session is what happens when I open two windows for the same page with different filters? I'm going to be a very confused user. — Ryan, Apr 21 '10 at 16:09

score 5 · Answer 1 · answered Apr 21 '10 at 03:26

5

Yes you can use the postData property to send additional filter parameters with each request. Note this will only work if you're using JSON to populate your grid. Just have an action that returns JsonResult.

In your jqgrid config include:

postData: {
   startDate: function() { return $('#startDate').val(); },
   anotherFilter: function() { return $('#anotherFilter').val(); }
}

For your apply filter button call $('#GridName').trigger('reloadGrid'). Alternatively I like to reload the grid anytime a filter changes. You can do this with jquery:

$('#filterName').change(function(){$('#GridName').trigger('reloadGrid');})

Your JSON should contain these properties for jqgrid to understand it:

total = pagedList.PageCount,
page = pagedList.PageNumber,
records = pagedList.TotalItemCount,
rows = pagedList.ToArray()

answered Apr 21 '10 at 03:26

Ryan

4,303
3
24
24

Very good idea to use function in postData! I don't know before, that $.param function used in $.ajax supports function type. – Oleg Apr 21 '10 at 09:17
Setting of filters one should use inside 'change' and 'keyup' events. I mean this, but not write it in my answer. Good one more time! $('#filterName').change(myRefresh).keyup(function (e) { var keyCode = e.keyCode || e.which; if (keyCode === 33 /*page up*/|| keyCode === 34 /*page down*/|| keyCode === 35 /*end*/|| keyCode === 36 /*home*/|| keyCode === 38 /*up arrow*/|| keyCode === 40 /*down arrow*/) { myRefresh(); } }); needed also to support keyboard input for select elements. – Oleg Apr 21 '10 at 09:19
I forgot to mention that I try to keep my JS very standardized so that I can build it using HtmlHelpers. The above code in my system would look like postData: { JqGridPostFilterValues(x => x.StartDate, x => s.AnotherFilter) } – Ryan Apr 21 '10 at 15:06

score 1 · Answer 2 · edited May 23 '17 at 12:07

First of all with respect of parameter postData (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options) you can send additional information to server. In Should one replace the usage addJSONData of jqGrid to the usage of setGridParam(), and trigger('reloadGrid')? you could probably find also some information, which can help you to make data refresh in jqGrid.

It seems to me, that probably instead of custom filtering outside of jqGrid a standard filtering (searching) of data can helps you. I use mix from custom filtering on some web pages and use the "advanced searching" (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:advanced_searching) almost anywhere. "Advanced searching" is a way give you interface to search for multiple fields at the same time with different conditions.

You url will be appended with:

?_search={_search}&page={page}&rows={rows}&sidx={sortIndex}&sord={sortDirection}&searchField={searchField}&searchString={searchString}&searchOper={searchOper}&filters={filters}

and you should update you function prototype correspondent. The information from filters is JSON packed object like

filters = 
    {"groupOp":"AND",
     "rules":[
       {"field":"invdate","op":"ge","data":"2007-10-06"},
       {"field":"invdate","op":"le","data":"2007-10-20"}, 
       {"field":"name","op":"bw","data":"Client 3"}
      ]
    }

To analyze information from filter I personally use DataContractJsonSerializer. The code fragment is:

MemoryStream ms = new MemoryStream (Encoding.Unicode.GetBytes (filters));
DataContractJsonSerializer serializer = new DataContractJsonSerializer (typeof(jqGridSearchFilter));
ms.Position = 0;

jqGridSearchFilter searchFilter = (jqGridSearchFilter)serializer.ReadObject (ms);
string groupOp = null;
if (!String.IsNullOrEmpty(searchFilter.groupOp) &&
    String.Compare (searchFilter.groupOp, "AND", StringComparison.Ordinal) == 0)
    groupOp = "AND";
else if (!String.IsNullOrEmpty(searchFilter.groupOp) &&
         String.Compare (searchFilter.groupOp, "OR", StringComparison.Ordinal) == 0)
    groupOp = "OR";
else {
    arSearchStringParameters = null;
    return null;
}
for (int i=0; i "WHERE ".Length)
        sb.Append (groupOp);
    AppendWhere (sb, _search,
        searchFilter.rules[i].field, searchFilter.rules[i].op, searchFilter.rules[i].data,
        arColumnInfos, parameters);
}

where

internal enum GroupOperation {
    AND,
    OR
}

[DataContract]
internal class jqGridSearchFilterItem {
    [DataMember]
    internal string field = null;
    [DataMember]
    internal string op = null;
    [DataMember]
    internal string data = null;
}

[DataContract]
internal class jqGridSearchFilter {
    [DataMember]
    internal string groupOp = null; //GroupOperation groupOp;

    [DataMember]
    internal List rules = null;
}

I you have one table and need to filter of two fields, you are absolutely right. But if this table only a small example to show you problems - I recommend you to try implement search in a table of multi-search. You write one code and use it in all you jqGrids independent on its complexity. Generally I use external filtering mostly for composed filtering like filtering for Summer, Holiday etc instead of searching for one day only. Interesting for you can be "Integrated Search Toolbar" (see. //trirand.com/blog/jqgrid/jqgrid.html "New in version 3.5") — Oleg, Apr 21 '10 at 08:55
External filtering and "Integrated Search Toolbar" is good for a standard user. Every user sees filtering possibility immediately. "Advanced searching" is good for users who ask you to have Excel export in all you grids. If you have a large web application with a lot of grids, users of the application knows the possibilities of the user interface (GUI). Power users like "advanced searching". — Oleg, Apr 21 '10 at 09:00

Add own search parameter in jqGrid in Asp.net mvc

2 Answers2