0

I'm using jqGrid in an ASP.NET MVC webapp. When the page first loads, the pager buttons are disabled and always show Page 1 of 1. However, if I change the page size, sort a column or perform a search, the pages update appropriately.

I've tried triggering reloadGrid in both gridComplete and loadComplete but neither are doing the trick. What is being called when I perform the other actions that gets the paging to refresh?

Here is my grid:

$(document).ready(function () {
    $('#grid').jqGrid({
        url: '@Url.Action("GetGridData", "MyController")',
        datatype: 'json',
        loadonce: true,
        mtype: 'POST',
        postData: {},
        colNames: ['Name', 'Price', 'Inventory'],
        colModel: [
            { name: 'Name', index: 'Name' },
            { name: 'Price', index: 'Price', sorttype: 'float', formatter: 'number', align: 'right' },
            { name: 'Inv', index: 'Inv', sorttype: 'int', align: 'right' }
        ],
        pager: '#gridpager',
        rowNum: 10,
        rowList: [5, 10, 20, 50, 100],
        sortname: 'Name',
        sortorder: 'asc',
        viewrecords: true,
        caption: 'Inventory',
        hidegrid: false,
        forceFit: true,
        height: 'auto',
        width: 1200
        //loadComplete: function() {     
        //    $('#grid').trigger("reloadGrid");
        //},
        //gridComplete: function () {
        //    $('#grid').trigger("reloadGrid");
        //}
    }).jqGrid('filterToolbar', { searchOnEnter: false }).jqGrid('navGrid', '#gridpager', { del: false, add: false, edit: false, search: false });

Server code:

[HttpPost]
public JsonResult GetGridData(string sidx, string sord, int page, int rows)
{
    List<Inventory> data = InventoryModel.GetInventory();

    var count = data.Count;

    var jsonData = new
        {
            total = (int)Math.Ceiling((double)count / rows),
            page = 1,
            records = count,
            rows = (from row in data
                    select new
                    {
                        id = row.Name,
                        cell = new object[]
                            {
                                row.Name,
                                row.Price,
                                row.Inv                         
                            }
                    }).ToArray()
        };
    return Json(jsonData);
}

JSON data:

{
  "total":11,
  "page":1,
  "records":104,
  "rows": [ { "id":"PRODUCT-1", "cell":["PRODUCT-1",0.52,41] },
            { "id":"PRODUCT-2", "cell":["PRODUCT-2",0.43,50] },
          ... ]
}
Paul
  • 3,725
  • 12
  • 50
  • 86
  • If I remove loadonce: true, it shows correctly, but then I lose the client-side sorting that I'm after. – Paul Jan 30 '12 at 20:28

1 Answers1

1

I am almost sure that the reason is the wrong JSON data which return the server. I suppose that the server returns total equal to 1 independent from the rowNum which will be send to the server as the rows parameter. It's important to understand that the grid body will be have the first rowNum (10) rows in the same order like from the server response. Because you use loadonce: true then the next refreshing of grid work locally and so it works correct. In any way the server should fill correct total parameter and it should use provide the data sorted corresponds to sortname and sortorder option of jqGrid. The parameters will be sent to the server as sidx and sord.

UPDATED: The reason if the bug in jqGrid 4.3.1

the line

ts.p.lastpage = Math.min( ts.p.page, Math.ceil(len/ rn) );

should be fixed to

ts.p.lastpage = Math.ceil(len/ rn);

For more information see my bug report here and the fix in the version of jqGrid on github here

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Perhaps my JSON data is not in the correct format for jqGrid? I added my server code to the question above. When I debug, I see the "total" value is 11 (which is correct for my data set). – Paul Jan 30 '12 at 19:35
  • 1
    @Paul: If would be good if you include the JSON response too. You can use [Fiddler](http://www.fiddler2.com/fiddler2/) for example to catch HTTP traffic. If you use ASP.NET MVC you can just define `string sidx, string sord, int page, int rows` as parameter of `GetGridData` and the method can declared as returned `JsonResult`. Moreover you use `i = row.ModuleName` which produce wrong ids as 1, 2, 3. You should use `id = row.ModuleName`. I can recommend you to read [the answer](http://stackoverflow.com/a/5501644/315935) additionally. – Oleg Jan 30 '12 at 19:44
  • Thanks. I made some changes to my server code and added the JSON being returned, but still no luck. – Paul Jan 30 '12 at 20:17
  • @Paul: Sorry, but how you can see from [the demo](http://www.ok-soft-gmbh.com/jqGrid/Paul.htm) the pager works without any problem with the JSON data which you posted. – Oleg Jan 30 '12 at 20:29
  • I read elsewhere that using loadonce: true disables the total in the json response. That still doesn't explain why your demo works and mine doesn't. – Paul Jan 30 '12 at 21:24
  • @Paul: I agree that `total` could not be the reason of your problem. In any way the problem is **NOT** in the code and the data which you posted. If you would post the link to the full Visual Studio project I could download and test it. – Oleg Jan 30 '12 at 21:28
  • Thank you for the offer. However, I am unable to do so in order to protect my company's IP. I'll keep working at it and post an answer when I find one. – Paul Jan 30 '12 at 21:37
  • 1
    @Paul: Then you should debug the project and find the reason yourself. In any way my demo shows that the jqGrid can display the JSON data which you posted. I recommend you to use `jquery.jqGrid.src.js` for debugging, use of cause the last (4.3.1) version of jqGrid and set breakpoint somewhere in `updatepager` function which can make pager disabled (see near of `.addClass('ui-state-disabled')`) – Oleg Jan 30 '12 at 21:50
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/7173/discussion-between-paul-and-oleg) – Paul Jan 30 '12 at 22:34