Create grid with pre-defined filter?

Mar 15, 2012 at 5:13 AM

I have a page that i'd like to take in a parameter to "pre-filter" a jqgrid on that page ...  for example, /Products/Bev and I'd like the resulting grid to be populated with my regular jqgrid with the filter applied  " ProductName StartsWith 'Bev' " so then once in the grid, they can simply hit refresh to reset the grid to the full list of products ...

I looked into creating a POST request from the code-behind and sending in my own JqGridRequest but I'm not sure how I'd implement that exactly and I doubt it's the best way to do this ... any suggestions?

Coordinator
Mar 15, 2012 at 11:22 PM

The best way of presetting the filter is setting postData filter property. You can see a demo here. This library doesn't support serialization of JqGridRequestSearchingFilters at this point (only deserialization) so you have to set it as string. It would look something like this in your case:

var grid = new Lib.Web.Mvc.JQuery.JqGrid.JqGridHelper<TModel>("gridId",
    ...
    postData: new { filters = "{ \"groupOp\": \"AND\", \"rules\": [ { \"field\": \"ProductName\", \"op\": \"bw\", \"data\": \"Bev\" } ] }" },
    ...
);

Of course you need to pass that string based on you controller action parameters.

Mar 16, 2012 at 3:19 AM
Edited Mar 16, 2012 at 8:39 PM

the following is not working when i pass it in to postdata.

filterData =
                    new
                        {
                            searchField = "ScreeningNumber",
                            searchString = pScreeningNumberFilter,
                            searchOper = "bw",
                            search = true
                        }; 

The postData that gets generated into the page is:

postData: {"searchField":"ScreeningNumber","searchString":"854","searchOper":"bw","search":true},rowNum: 15

and when i do it using the UI, this is the POST values captured with Fiddler:

searchField=ScreeningNumber&searchString=847&searchOper=bw&search=true&_search=true&nd=1331930081214&rows=15&page=1&sidx=ScreeningNumber&sord=asc&filters=

any thoughts?

Coordinator
Mar 16, 2012 at 8:39 PM

The good news is, that this part will work:

var grid = new Lib.Web.Mvc.JQuery.JqGrid.JqGridHelper("grid",
    ...
    postData: new {
        searchField = "ScreeningNumber",
        searchString = 1,
        searchOper = "bw",
    },
    ...
);

But the _search parameter can't be changed this way (jqGrid will overwrite it), you would have to use setGridParam method of jqGrid API:

$('#grid').jqGrid('setGridParam', { search: true });

The problem is that there is no good callback in which you could call this method, because all callbacks are called for every request, you might have to write some javascript to determine the first request.

Mar 16, 2012 at 10:05 PM

great information! with js, i'll use getGridParam() to retrieve the postData property first, then if it contains "searchField" then I'll call setGridParam to search=true.  thanks a lot! I tried googling this and nothing said anything about needing to enable search programmatically.

Mar 17, 2012 at 10:28 PM

I couldn't get this to work right... any other suggestions to accomplish this?  I even tried harcoding some JS to set these properties on jqgrid on the page and still nothing.

 

$("table#worksheetsTable").jqGrid("setGridParam", {
                gridComplete: function() {
                    //tried to set all this here too
                },
                postData: { searchField: "ScreeningNumber", searchString: "8882", searchOper: "bw" },
                search: true
            });
after the code above, 

$("table#worksheetsTable").jqGrid("getGridParam", "postData") =

{
_search : false,
nd : 1332023264853,
rows : 15,
page : 1,
sidx : "ScreeningNumber",
sord : "asc",
searchField : "ScreeningNumber",
searchString : "8882",
searchOper : "bw"
}

 

thank you again for the help!

Coordinator
Mar 19, 2012 at 8:29 AM

Hi

Sorry for not responding earlier but I was off for the weekend. I have noticed that you have brought your question to StackOverflow and that you are testing Oleg's solution. Please let me know how did that went. If it won't solve your problem I will look into this issue further today.

Mar 21, 2012 at 6:59 PM

this issue fell lower in my priorities for this project but i will definitely come back to it and let you know once I try the stackoverflow suggestion.

Jun 7, 2012 at 3:28 PM
Edited Jun 7, 2012 at 3:32 PM

Hi,

First of all thank you very much for this lib it is really usefull!

I've got a similar issue than the previous post.

I've got a drop down box in my view and in order to display the grid, the user have to choose an item and click "search". The item he choose is a parameter that must be given to the jqGrid. 

Normally I construct the jqGrid directly in JS so I have no issue to retrieve the click action, get the drop down value and pass it to the jqGrid in the postdata parameter. Here is a sample of the code which is working.

        $('#search').click(function () {
            if ($("#ClientList").val() == "") {
                $("#DivError").show().fadeOut(2000);
                $("#ErrorText").text("Please select at least a client").show().fadeOut(2000);
                return false;
            }
            var clientId = $("#ClientList").val();
            $('#jqgContactInfo').jqGrid({
                ...
                postData: {clientId:clientId},
                ...
            });
      });

Now my question is how do I do the same result with the JqGridHelper

@{
    var grid = new Lib.Web.Mvc.JQuery.JqGrid.JqGridHelper<ContactInfoViewModel>("contacts",
                dataType: Lib.Web.Mvc.JQuery.JqGrid.JqGridDataTypes.Json,
                methodType: Lib.Web.Mvc.JQuery.JqGrid.JqGridMethodTypes.Post,
                pager: true,
                rowsNumber: 10,
                caption:"Contact Info",
                sortingName: "ContactId",
                sortingOrder: Lib.Web.Mvc.JQuery.JqGrid.JqGridSortingOrders.Asc,
                url: Url.Action("ContactInfoTest"),
                viewRecords: true,
                autoWidth: true
        )
}

How can retrieve my drop down item after the click since I'm not in the JS and how can I give this parameter to the helper?

Thanks in advance for your help

Coordinator
Jun 8, 2012 at 7:00 AM

You can use PostDataScript option to solve your issue. This option allows providing a JavaScript function which will set the postData at runtime:

@{
    var grid = new Lib.Web.Mvc.JQuery.JqGrid.JqGridHelper<ContactInfoViewModel>("contacts",
                dataType: Lib.Web.Mvc.JQuery.JqGrid.JqGridDataTypes.Json,
                methodType: Lib.Web.Mvc.JQuery.JqGrid.JqGridMethodTypes.Post,
                pager: true,
                rowsNumber: 10,
                caption:"Contact Info",
                sortingName: "ContactId",
                sortingOrder: Lib.Web.Mvc.JQuery.JqGrid.JqGridSortingOrders.Asc,
                url: Url.Action("ContactInfoTest"),
                postDataScript: "function() { return { clientId: $("#ClientList").val() }; }"
                viewRecords: true,
                autoWidth: true
        )
}

Jun 8, 2012 at 9:40 AM
Edited Jun 8, 2012 at 9:50 AM

Thanks a lot for your help.

Here is what I used and it works perfectly:

@{
    var grid = new Lib.Web.Mvc.JQuery.JqGrid.JqGridHelper<ContactInfoViewModel>("contacts",
                   dataType: Lib.Web.Mvc.JQuery.JqGrid.JqGridDataTypes.Json,
                   methodType: Lib.Web.Mvc.JQuery.JqGrid.JqGridMethodTypes.Post,
                   pager: true,
                   rowsNumber: 10,
                   sortingOrder: Lib.Web.Mvc.JQuery.JqGrid.JqGridSortingOrders.Asc,
                   url: Url.Action("ContactInfoTest"),
                   postDataScript: "{ clientId: clientId}"
        );
}