How to get jqGrid reload to go to server?

Question

We use the jqGrid navigator reload button on a grid with loadonce set to true.

The reload button currently does NOT go back to the server to get the data - how can we get the reload to go to the server to get the latest data?

I believe we can use the beforeRefresh callback to set the grid data to json instead of local but I'm not clear how to even configure the beforeRefresh method - I don't really understand the docs.

Villareal

Answer 1

You are not the only person which has the problem. I answerd to the same question before. To reload the grid content from the server you should reset the datatype parameter to original value "json" or "xml" and then refresh the grid. For example

jQuery("#list").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');

UPDATED: To call the line inside of beforeRefresh event handler you can do following

jQuery("#list").jqGrid('navGrid','#pager',
  { edit:false,view:false,add:false,del:false,search:false,
    beforeRefresh: function(){
        alert('In beforeRefresh');
        grid.jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
    }
  });

I modified an example from am old question. Here if you click on the refresh button you can see live how the code work.

UPDATED 2: Free jqGrid supports some new options. reloadGrid event supports fromServer: true parameter which can be used to force reloading of data from the server and navGrid supports reloadGridOptions option which can be used to specify the options of reloadGrid used on click on Refresh button. So the above code could be

$("#list").jqGrid("navGrid", {
    edit: false,
    add: false,
    del: false,
    search: false,
    reloadGridOptions: { fromServer: true }
});

By the way one can use navOptions option of jqGrid to specify default options of navGrid (see the wiki article). It allows to write the code something like

$("#link").jqGrid({
    // all typical jqGrid parameters
    datatype: "json", // or "xml"
    loadonce: true,
    pager: true, // no empty div for page is required
    navOptions: {
        edit: false,
        add: false,
        del: false,
        search: false,
        reloadGridOptions: { fromServer: true }
    }
}).jqGrid("navGrid");

Burkey

Thanks - How can you run this code when the reload button is clicked? I am not clear how to configure the nav bar to execute the beforeRefresh method if this is what you are alluding to. – Villareal

@Marcus: If is very easy. I includes the corresponding code in my answer. – Burkey

@Oleg, I tried doing this, but once I click the refresh button, the pagination does not work. – Esdraelon

@SukeshKumar: If you have problems with pagination you should probably reset datatype inside some other callbacks like onPaging for example (see the answer for an example). – Burkey

Answer 2

I have tried the following config and it works.

<script type="text/javascript">
jQuery(function() {
    jq("#YOUR-GRID-ID").jqGrid({
        ...
        loadonce: true,
        ...
    });
    jQuery("#refresh_YOUR-GRID-ID").click(function(){
        jQuery("#YOUR-GRID-ID").setGridParam({datatype: 'json'});
        jQuery("#YOUR-GRID-ID").trigger("reloadGrid");
    });
});
</script>

Pod