views:

214

answers:

1

I'm looking to find the best way to allow users to choose to show ALL records in a jqGrid. I know that a -1 value passed for the rows parameter denotes ALL, but I want the word "ALL" not a -1 to appear in the rowList select element, ie. rowList: [15, 50, 100, 'ALL'].

I'm passing the grid request to a web service which accepts an int for "rows", and I'm trying find how and when I should change the user selected value of "ALL" to a -1 before it gets sent to the web service.

Below is my cleaned up grid code. I tried some various code blocks before my $.ajax in the datatype function. But most attempts just seemed like I have to be doing this the most convoluted way I possibly could. For example,

datatype: function(postdata) {
   if ($("#gridTableAssets").jqGrid('getGridParam', 'rowNum') == 'ALL') {
      $("#gridTableAssets").appendPostData({ "rows": -1, "page": 1 });
   }
   $.ajax({...

But doing that seemed to cause the actual "page" GridParam to be nulled out on subsequent grid actions, forcing me handle that in other places. There just seems like this is something that would be frequently done out there and have clean way of doing it.

Cleaned grid code:

$("#gridTableAssets").jqGrid({
    datatype: function(postdata) {
       $.ajax({
           url: "/Service/Repository.asmx/GetAssets",
           data: JSON.stringify(postdata),
           type: 'POST',
           contentType: "application/json; charset=utf-8",
           error: function(XMLHttpRequest, textStatus, errorThrown) {
              alert('error');
           },
           success: function(msg) {
              var assetsGrid = $("#gridTableAssets")[0];
              assetsGrid.addJSONData(JSON.parse(msg));
              ...
           }
       });
    },
    ...
    pager: $('#pagerAssets'),
    rowNum: 15,
    rowList: [15, 50, 100, 'ALL'],
    ...                    
    onPaging: function(index, colindex, sortorder) {
       SessionKeepAlive();
    }
});

And here is the web service

[WebMethod]
public string GetAssetsOfAssetStructure(bool _search, int rows, int page, 
    string sidx, string sord, string filters)
+1  A: 

First of all I find your question very good. As I started with jqGrid I was searching for "All" in the rowList and made some experiments, but without any success. Then I forgot about this problem. Now after your question I think about using this feature in all my jqGrids.

Now about the solution. It is very easy, but befor all I suggest to replace datatype as function to the datatype: 'json'. All what you do inside of the function you can do with standard 'json' type. To change contentType to "application/json; charset=utf-8" one can use ajaxGridOptions option (see http://stackoverflow.com/questions/2675625/setting-the-content-type-of-requests-performed-by-jquery-jqgrid/2678731#2678731 for details). One can use postData parameter as a replacement of data parameter of jQuery.ajax, but you will need it only if you want to send some additional parameters to server (like described in http://stackoverflow.com/questions/2928371/how-to-filter-the-jqgrid-data-not-using-the-built-in-search-filter-box). At the end we receive something like following:

$("#gridTableAssets").jqGrid({
    datatype: 'json',
    gridview: true,
    url: '/Service/Repository.asmx/GetAssets',
    //postData: postdata, // add some additional parameters
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
    mtype: 'POST',
    // ...
    pager: $('#pagerAssets'),
    rowNum: 15,
    rowList: [15, 50, 100, 'ALL'],
    serializeGridData: function (postData) {
        if (typeof postData.rows === "string") {  // "ALL"
            postData.rows = 10000;  // or -1 if your server 
        }
        if (isNaN(postData.page)) { // fix NaN in page for rows="ALL"
            postData.page = 1;
        }
        return JSON.stringify(postData);
    },
    // ...                    
});

If you plan to use serializeGridData, ajaxGridOptions and some other parameters in all your jqGrids you can define this function inside of $.jgrid.defaults (see one more time http://stackoverflow.com/questions/2675625/setting-the-content-type-of-requests-performed-by-jquery-jqgrid/2678731#2678731).

Oleg
Oleg, thanks for the insights. I was able to incorporate some of the things into my datatype function to get it to work for me. I would love to move away from datatype function, but keep running into the same issue when i try. I'll try to explain my issue in a comment or two, maybe there's an obvious fix. First off, I'm trying everything with both 3.6.4 and 3.7.1.My problem is getting the grid to populate with the data returned when not using the datatype function.(Continued in next comment...)
Billyhole
The web service returns the data either way but only fills the grid if in my datatype function, I add a datafilter function to remove the d property. var msg = JSON.parse(data); if (msg.hasOwnProperty('d')) return msg.d; -- I tried playing with my jsonReader array, but still couldn't get it. My json data format coming back is {"d": "{"Total":nnn,"Page":nnn,"Records":nnn,"Rows":[{"STANDARDASSETID":nnnn,"field1":"xxxxx","field2":"yyyy"}], "UserData": zzzz}"}----And my jsonReader is {root:"Rows",page:"Page",total:"Total",records:"Records", repeatitems:false,userdata:"UserData",id:"Id"}
Billyhole
It seems you do something wrong in your web service. Could you better open a new question and post a code of your WebMethod inside. I'll change the code so, that the main data contain will not serialized twice.
Oleg