Question

Please see the sample code below.

• Initially the grid comes up with no sort icon in any of the grid column headers – good.

• Click on ‘Client’ column header to sort the grid.

• Click on REFRESH button. It calls grid.trigger(‘reloadGrid’).

• The grid is reloaded but sort icon on ‘Client’ header is still there. – not so good.

`

  $(function() {
     var mydata = [  
            {id:"1", name:"test",       amount:"200"},  
            {id:"2", name:"test2",      amount:"300"},  
            {id:"3", name:"F",          amount:"400"},  
            {id:"4", name:"test4",      amount:"200"},  
            {id:"5", name:"test5",      amount:"300"},  
            {id:"6", name:"test6",      amount:"400"},  
            {id:"7", name:"test7",      amount:"200"},  
            {id:"8", name:"test8",      amount:"300"},  
            {id:"9", name:"test9",      amount:"400"},  
            {id:"10",name:"test10",     amount:"500"},  
            {id:"11",name:"F",          amount:"500"},  
            {id:"12",name:"test11",     amount:"500"},  
            {id:"13", name:"test",      amount:"200"},  
            {id:"14", name:"O",         amount:"200"}  
 ];  
 jQuery("#list").jqGrid({           
        datatype: "local",  
        data: mydata,  
        width: 700,  
        loadComplete: function() {
            $(this).setGridParam({sortname: 'id'});
        },  
                    colNames:['Inv No','Client', 'Amount'],  
        colModel:[
            {name:'id',index:'id', width:65, sorttype:'int', searchoptions:{sopt:['eq','ne','lt','le','gt','ge']}},  
            {name:'name',index:'name', width:100, searchoptions:{dataUrl:'/api/domains/producttypedomain'}},  
            {name:'amount',index:'amount', sorttype:'int', width:80, align:"right"}
        ],  
        rowNum:100, 
        pager: '#pager',            
        height:'auto',  
        viewrecords: true,  
        rownumbers: true,  
        gridview : true,            
        caption:"Advanced Search Example"
    });
    jQuery("#list").jqGrid('navGrid','#pager',  
    {
        edit:false,add:false,del:false,search:true,refresh:true
    },  
    {}, // edit options
    {}, // add options
    {}, //del options
    {
        multipleSearch:true, overlay:false,  recreateFilter:true            
    } // search options
    );
});
$(function() {
    $('#refresh-btn').click(function() {
        jQuery("#list").trigger('reloadGrid');          
    });
});

`

Answer 1

If you want that the sort icon will be not seen you can do this with

$("span.s-ico",jQuery("#list").grid.hDiv).hide();

Unsorted grid (sortname:'') is not the best choice in the most situations. So I recommend you to choose some column like ‘id’ for the data sorting. If you do want to have sorted data unsorted you have to set sortname:'' parameter before the grid reload. So the function executed on click of your ‘#refresh-btn’ button should be about the following

$('#refresh-btn').click(function() {
    var myGrid = jQuery("#list");
    $("span.s-ico",myGrid[0].grid.hDiv).hide(); // hide sort icons
    myGrid.setGridParam({sortname: ''}).trigger('reloadGrid');
});

What you want to do in the loadComplete am am not sure. Changing of sortname parameter on the place is too late.

You can see modified version of your code here. I change the order of some of the first items in the mydata array to show more clear that after the loading the data will be shown in the unsorted order.

I recommend you to remove Reload button from the grid navigator bar or to add custom button with look like “Reload” button and do what you really want to have.