How to Reload Data jqGrid

Question

I'm using jqGrid and I have a problem with refresh data after call event of jstree.
I'm following in this post. Exactly I don't know where to put it.
This is my code. What shoud I do?

$('#jsTree_DonVi').on('changed.jstree', function (e, data) {
    var id = data.instance.get_node(data.selected[0]).id;
    var text = data.instance.get_node(data.selected[0]).text;
    var tinhTrang = 0;
    var nam = 0;

    // I tried but it's not working 
    $("#jqGrid").setGridParam({ datatype: 'json' });
    $("#jqGrid").trigger("reloadGrid");
    //---

    $("#jqGrid").jqGrid({
        url: '/Home/GetData',
        postData: {
            "id": id,
            "nam": nam,
            "tinhTrang": tinhTrang
        },
        datatype: "json",
        colModel: [
           {
               label: 'Tên công trình', name: 'Ten', sorttype: 'string', width: 800, align: 'center'
           },
           { label: 'Kế hoạch/Thực hiện', name: 'KHTH', sorttype: 'string', align: 'center' },
           { label: 'Địa điểm xây dựng', name: 'DiaDiem', sorttype: 'string', align: 'center' }
        ],
        viewrecords: true, // show the current page, data rang and total records on the toolbar
        rowNum: 30,
        width: 1228,
        height: 500,
        loadonce: true,
        pager: "#jqGridPager"
    })};

My HTML:

<div id="renderTable">
    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
</div>

Solution here:
I changed my jqGrid from Guriddo jqGrid JS to Free jqGrid.
And replace

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

To

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

Could you post you HTML as well? – Michael Jan 27 '16 at 04:33 — Michael, Jan 27 '16 at 04:33

Oleg · Accepted Answer · 2016-01-27T08:38:18.037

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).

@QuanLeDucMinh: By the way, it's recommended that you "accept" the answers which your wrote yourself on your questions (see [your answer](http://stackoverflow.com/a/34014810/315935)). It gives searching engine the tip that the information from the answer is *helpful* and it *solves* the problem. — Oleg, Jan 27 '16 at 15:29

How to Reload Data jqGrid

1 Answers1