Jquery-ui – loadonce:true causing issues in paging for jqGrid

jqgridjquery-ui

I have a jqGrid as mentioned below:

UsersList.aspx

<div id="users" class="grid-right">
    <h3>Users</h3>
    <table id="client-group-users-list"></table>
    <div id="client-group-users-list-pager"></div>
</div>

userlistgroup.js

function createUsersGrid(getUsersForClientGroupUrl) {
    $('#client-group-users-list').jqGrid({
        height: "auto",
        width: "590",
        url: getUsersForClientGroupUrl + "?random=" + Math.random(),
        rowNum: 10,
        mtype: 'POST',
        viewrecords: true,
        postData: { clientGroup: getClientGroupId(), active: true },
        datatype: 'json',
        colNames: ['ClientGroupID', 'Login', 'Role'],
        //pgbuttons: false,
        //pgtext: null,
        //viewrecords: false,
        gridview: true,
        colModel: [
            { name: 'ClientGroupID', index: 'ClientGroupID', hidden: true },
            { name: 'Login', index: 'Login', search: false, width: 130, sorttype: "string" },
            { name: 'Role', index: 'Role', search: false, width: 100 }
        ],
        caption: "Users for client group: " + getClientGroupName(),
        pager: '#client-group-users-list-pager',
        ondblClickRow: function (userId) {
            editUser(userId);
        },
        sortname: 'Login',
        sortorder: 'asc',
        loadui: 'enable',
        loadError: function (xhr, status) {
            location.reload();
        }           
    })
    .jqGrid('navGrid', '#client-group-users-list-pager',
        { add: false, del: false, edit: false, search: false, view: false })
}

enter image description here

Sorting on the Login column is not working. However if I put loadonce:true then it starts working but the total number of records are not reflected and paging functionality gets stops working.

Can any one help me out in handling both sorting and paging working together with datatype: 'json'.

Thanks & Regards,
Santosh Kumar Patro

Best Answer

It seems that you have typical understanding problems how jqGrid interact with the server.

If you use datatype: 'json' without loadonce: true option then the server is responsible for sorting, paging and optionally searching/filtering of the data. In the case every request to the server contains important input parameters which default values are: page, rows, sidx and sord. There are other parameters _search, nd and some other, but there are not so important in your case. So at the first loading on the grid content jqGrid post to the URL getUsersForClientGroupUrl somthing like

page=1&rows=10&sidx=Login&sord=asc

The values of rows, sidx and sord parameters corresponds the values of rowNum, sortname and sortorder options which you use. The sever should provide requested page of data (the 1-st page of data, the size of the page is 10 rows). One can use prmNames option of the grid to rename page, rows, sidx and sord parameters.

It's important to understand that when the user click on the "Next Page"/Previous Page" buttons or if the user click on the column header to change the sorting then jqGrid makes new request to the server and the server should provide the page of data based on the input parameters.

On the other side if you use loadonce: true option then the server should return all the data (all pages). The loaded data should be just sorted corresponds with sidx and sord options. After loading of the data jqGrid change datatype from "json" to "local". All next sorting, paging and filtering (see filterToolbar method) or sorting (see here and here) will be implemented by jqGrid internally (on the client side).

If you need reload the data from the server you should reset the value of datatype to "json" (see the answer). Typically one do this inside of beforeRefresh callback of navGrid. So the grid will be reloaded from the server if the user clicks on the "Refresh" button of the navigator bar.

I supposed that you just not changed your server code and the server still returns one page of data when you use loadonce: true option. It's wrong. Don't forget to sort initial data on the server.

Some common problems in the code which you posted. I recommend you remove "?random=" + Math.random() part from the URL because it has no sense. Such method are used typically to prevent caching of server respond in case of usage mtype: "GET" (HTTP GET verb). You use mtype: 'POST'. So the response will not changed at all. Moreover if you would use mtype: "GET" then jqGrid append already URL with nd parameter which have the same role as your random parameter. The best way is to set Cache-Control HTTP headers of the server response to private, max-age=0 and to remove nd with prmNames: { nd: null } jqGrid option. See the answer and another one for more information about caching.

Another problem: you should understand that you can call createUsersGrid function only once. After it the <table> with id="client-group-users-list" will be modified. The next call of createUsersGrid function will do just nothing. One should consider whether one need to place JavaScript fragment in the function if it could be called only once. Alternatively one can use GridUnload method to destroy all existing jqGrid structures before usage it at the next time.

If you want that clientGroup: getClientGroupId() parameter which will be sent to the server are

Related Topic