jqGrid sort on first load

Question

I have the following code for my grid (I use an XML file in the same directory as data source).

var handsetGrid = $("#products").jqGrid({
    url: 'catalog.xml',
    datatype: "xml",
    colNames:["SKU", "Name", "Brand", "Description", "Metadescription"],
    colModel:[
        {name:"sku",  key: true, index:"sku", width:100, xmlmap:"sku", align:"right", sortable:true},
        {name:"Name", index:"Name", width:300, sortable:true, xmlmap:">name>en"},
        {name:"Brand", index:"Brand", width:100, sortable:true, xmlmap:"brand"},
        {name:"description", index:"description", width:400, classes:"desc1", xmlmap:"description1>en", formatter:descFormatter},
        {name:"metadescriptionEn", index:"metadescriptionEn", width:400, classes:"desc1", xmlmap:"metadescription>en", formatter:descFormatter}
    ],
    width: 1300,
    height:480,
    shrinkToFit:false,
    rownumbers: true,
    scroll: true,
    rowNum:22,
    ignoreCase: true,
    viewrecords: true,
    sortname: "Name",
    sortorder: "asc",
    sortable: true,
    loadonce: true,
    pager: "#pager",
    caption: "Handsets",                    
    xmlReader: {
        root: "products",
        row: "product",
        repeatitems: false,
        id: "sku"               
    },
    loadComplete: function(data) {
        // test whether we have initial loadind and the "data" has XML type
        if (data.nodeType) {
            myXMLdata = data; // save original XML data                         
        }
    },
    subGrid: true,
    subGridRowExpanded: function(subgrid_id, row_id) {
        var subgrid_table_id;
        subgrid_table_id = subgrid_id + "_t";
        jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
        jQuery("#" + subgrid_table_id).jqGrid( {
            datatype:'xmlstring',
            datastr: myXMLdata,
            colNames: [ 'Id', 'Name', 'Duration', 'Price'],
            colModel: [
                {name:"ppid",index:"ppid",width:80, xmlmap:">id"},
                {name:"ppname",index:"ppname",width:150, xmlmap:">name>en"},
                {name:"ppduration",index:"ppduration",width:85, xmlmap:">priceperduration>duration>en", formatter: durationFormatter},
                {name:"ppprice",index:"ppprice",width:80, xmlmap:">priceperduration>price", formatter: priceFormatter}
            ],
            gridview: true,
            xmlReader: {
                root: "products>product:has('sku:contains('"+row_id+"')')>priceplansavailable",
                row: "priceplan",
                repeatitems: false
            }                           
        });
    }       

}); 

$("#handsets").jqGrid('navGrid','#pager',{edit:false,add:false,del:false,search:false,refresh:false});
$("#handsets").jqGrid('navButtonAdd',"#pager",{caption:"Search Bar", title:"Toggle Search Toolbar", buttonicon :'ui-icon-pin-s',
    onClickButton:function(){
        handsetGrid[0].toggleToolbar();
    }
});

$("#handsets").jqGrid('navButtonAdd',"#pager",{caption:"Clear", title:"Clear Search", buttonicon :'ui-icon-refresh',
    onClickButton:function(){
        handsetGrid[0].clearToolbar();
    }
});

$("#handsets").jqGrid('filterToolbar', {defaultSearch:'cn'});

My problem is when I load the grid I want it to be already sorted for the column : Name. I expected to be working with these three parameters :

sortname: "Name",
sortorder: "asc",
sortable: true,

After clicking on the columns it is working properly, just the first sort is not working (after loading the page).

Oleg · Accepted Answer · 2016-03-18T10:50:35.937

10

If you use remote datatype like "xml" or "json", the server is responsible to provide the sorted data.

If you cannot do this, you can trigger the reloadGrid inside of loadComplete, but you should use setTimeout JavaScript method to allow the complete the first loading process.

To have no recursions you should place "reloadGrid" inside of if (data.nodeType) block of loadComplete.

UPDATED: Free jqGrid have the option forceClientSorting: true, which solves the problem. The option allows to force sorting and filtering of data (if optional postData.filters is set) before the first page will be displayed.

edited Mar 18 '16 at 10:50

answered Apr 11 '11 at 09:50

Oleg

220,925
34
403
798

2

It works fine like this: if( data.nodeType ){ myXMLdata = data; setTimeout( function() { $("#products").jqGrid('setGridParam',{ page: 1 }).trigger("reloadGrid"); }, 1 ); } ... 1 milliseconds is enough to make it works. Thanks for your help. – рüффп Apr 12 '11 at 07:38
Presumably the `setTimeout` is only required because the data is coming from a file? – Justin Ethier Apr 12 '11 at 19:23
i am getting to recursion with if (data.nodeType) – kozla13 May 29 '13 at 09:00
1

@kozla13: I don't understand how you can have recursion. **Do you use `datatype: "xml", loadonce: true` like in the question?** `data.nodeType` will be changed only with XML data. You can test for `datatype` alternatively: see [the answer](http://stackoverflow.com/a/8119695/315935). – Oleg May 29 '13 at 09:27
@Oleg: i am using json data, that was the problem. Thanks for the fast response. – kozla13 May 29 '13 at 10:37
What will be the solution if we are getting `json` type data? I am reloading the grid in `loadComplete` without `data.nodeType` condition.. and i am getting continuous recursion – sohaiby Oct 14 '15 at 07:31
@sohaiby: The callback `loadComplete` will be called **on every loading/reloading of the grid**. So it's very bad idea to reload the grid in `loadComplete`. You will have continuous recursion of cause. So one should reload the grid only at the first load and trigger `reloadGrid` only inside of `setTimeout` to allow jqGrid process the previous loading till the end. – Oleg Oct 14 '15 at 09:13
@Oleg What should be the value of `sortname` if I do not want to sort by column name? I only want to sort by `groupHeader`. – Suhail Gupta Dec 09 '15 at 13:19
You should not include and `sortname` at all, then it will be used default `sortname: ""`, which means no sorting. – Oleg Dec 09 '15 at 15:05

score 0 · Answer 2 · answered Apr 11 '11 at 10:15

0

try running

handsetgrid.sortGrid("Name");

after loadComplete

answered Apr 11 '11 at 10:15

Alex K

6,737
9
41
63

How can you now loadComplete has finished (there is not an event like afterLoad), because I tried to put this at the end but no effect at all except my table gets empty. – рüффп Apr 12 '11 at 07:31
you have that parameter there in loadComplete: function(data) { – Alex K Apr 14 '11 at 17:17

jqGrid sort on first load

2 Answers2

Linked