How to Refresh the Data in a Jqgrid

How to refresh the data in a jqGrid?

$('#grid').trigger( 'reloadGrid' );

How to Reload Data jqGrid

I suppose that the problem exist because you create the grid inside of event handler ($('#jsTree_DonVi').on('changed.jstree', function (e, data) {/* here */});. It's important to understand that jqGrid converts initial empty <table id="jqGrid"></table> in relatively complex structure of tables and divs. See the post for more details.

You can fix the problem by usage of GridUnload method for example. You can replace the lines

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

with the line

$("#jqGrid").jqGrid("GridUnload");

The implementation of GridUnload can depend on the fork of jqGrid, which you use (free jqGrid, Guriddo jqGrid JS or an old jqGrid in version <=4.7). I develop the fork free jqGrid, which I would recommend you. You can use it from CDN (see the wiki article) or to install from one from well-known JavaScript repositories: npm, bower, NuGet or WebJars (see the readme).

JqGrid: how to refresh the grid in afterSubmit?

Make sure that you are using updated version of jqGrid in your application
If all other parameters are are correct ( refresh:true etc ) you can use this to reload Grid

$(grid_selector).trigger("reloadGrid");

Please note this condition too

The reloading is not performed due to the datatype got change to local(loadonce is true).You need to reload the grid manually in afterSubmit function for form editing. You need to set the datatype to json before triggering reload event.

$(grid_selector).jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');

how to reload all jqgrids on the page after changes made in any of them

It's unclear which changes exactly you mean. If you use free jqGrid fork, then the recommended way to reload the grid from the server, if it has loadonce: true option, would be to use .trigger("reloadGrid", {fromServer: true}) or $("#list").trigger("reloadGrid", [{fromServer: true, current: true, page: 1}]); (see the answer or this one). Thus you can do the following:

$(".ui-jqgrid-btable").trigger("reloadGrid", {fromServer: true});

If you need to trigger reloading of the grid inside of some callback like afterSubmit then I recommend you to wrap the above code in the setTimeout to allow to finish processing of the afterSubmit before reloading of the grid:

afterSubmit: function () {
    setTimeout(function () {
        $(".ui-jqgrid-btable").trigger("reloadGrid", {fromServer: true});
    }, 50);
    return [true, "", ""];
}

It's possible to reload the grid data (remote) and keep the filters?

It's possible, but the problem consist of many mini-problems. One should first understand how reloading and filtering works, which jqGrid parameters are important for that and then one have to implement the corresponding small steps in your program.

The first problem is reloading the data from the server in case of using loadonce: true option. You use currently the code

$grid.jqGrid('setGridParam', {datatype: 'json'}).trigger('reloadGrid');

but free jqGrid allows to do

$grid.trigger('reloadGrid', {fromServer: true});

alternatively. Free jqGrid saves the original datatype value ("json", "jsonp", "xml" and so on) in internal dataTypeOrg option and it restores datatype from dataTypeOrg if the option fromServer: true are used. It's important to understand that local filtering is nothing more as reloading the grid, which has datatype: 'local'. Thus one should not use fromServer: true on all reloads (one should not use reloadGridOptions: { fromServer: true } permanently) if one want to use powerful local sorting and filtering of data loaded from the server.

The second problem is filtering the data returned from the server before the data will be displayed in jqGrid. It's not possible in old jqGrid, but free jqGrid has the option forceClientSorting: true, which do the thick. The name of the option is not good, but I don't want to change it because it's used. The option force local sorting and filtering the data before the first page of the data loaded from the server will be displayed in the grid.

The next problem is filling the filter toolbar with the data from the filter inclusive displaying the filter operation (if searchOperators: true option of filterToolbar are used). The option loadFilterDefaults: true, activated by default, do that. It's an additional free jqGrid option, which not exist in the old jqGrid. As the result the settings like

postData: {
    filters: JSON.stringify({
            groupOp: "AND",
            groups: [],
            rules: [
                {field: "ship_via", op: "ne", data: "FedEx"},
                {field: "closed", op: "eq", data: true},
                {field: "name", op: "bw", data: "test"}
            ]
    })
},
search: true,
forceClientSorting: true

used in https://jsfiddle.net/OlegKi/hvwn1tf7/3/ do all, what one need.

The next things, which one should take in consideration is mostly the saving/restoring postData.filters and setting search: true if one want to apply the filters, but it one understand how all works, then one can implement the required behavior very easy.

jqGrid does not refresh with new data

Search for $(function() { in your code. It's the same as $(document).ready(function() {, but you have included the block $(function() { inside of $(document).ready(function() {. You should remove $(function() { (see near to the place where you creates the jqGrid).

It is possible to refresh/reload a jqgrid in another view/page after a button is click?

Yes it is possible. I am not sure what server side language you are using but using web-sockets or signalR you can send a message to all open pages to refresh if data has been refreshed on server. You can also use polling to achieve that.
Concept is this:

• You update data from grid or anywhere on page 1 and that goes to server. Now you want to refresh pages that may contain this data or intend to show it.
• Polling : On all such pages you refresh the data from server if there is a change obtained from polling
• SignalR : You can use a hub to send a method to all clients to run a javascript code that checks for grid presence and then refresh it.

There are other methods as well where when someone hits a page that has grid you can make an entry in database about that page and save its sate as valid. When you update something that makes this data invalid then you can poll all pages in this table and tell user to/or automatically refresh the grid for all such pages.

I have only done this in signalR which wraps polling and websockets so you can use any of these if signalR is not your choice.

jqGrid Reload Filter Values After .trigger("reloadGrid")

Below is the code that will force the grid to reload using the sort/filter information. This code goes at the end of loadComplete(). Setting the datatype to local then triggering the reload is the key to getting the grid to apply the sort/filter to the grid (reloading when data is set to 'json' which will reload the grid from the server.)

var dtype = $('#gridtable').jqGrid("getGridParam", "datatype");

if (dtype == 'json'){
    $("#gridtable").jqGrid("setGridParam", {datatype: 'local'});    
    setTimeout(function () {
        p.search = true;
        $("#gridtable").trigger("reloadGrid");
        },0
    );
}

---

Related Topics