Free JqGrid - grid does not refresh

Question

I have a combo box where when the selection changes, the associated grid is repopulated with new data.

<div class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                <select id="Subcontractors"
                        data-bind="options: Subcontractors, optionsText: 'Subcontractor', optionsValue: 'ContractSubcontractorId', value: selectedSubcontractor, optionsCaption: '<-- Select Subcontractor -->', event:{ change: subcontractorChanged}"
                        class="form-control"></select>
            </div>
        </div>
    </div>
    <div id="containerGrid">
        <div id="divLoading" class="jqgrid-fluid-width divLoading has-error"></div>
        <table id="grid" class="grid"></table>
        <div id="pager"></div>
    </div>

The grid is defined as follows;

var populateGrid = function (data, $form) {
    var grid = $("#grid");
    grid.jqGrid({
        data: data,
        colNames: ["Open Faults", "Address", "Fault No", "Description"],
        colModel: [
            { name: "numberOfOpenFaults", width: 50 },
            { name: "fullAddress", width: 400, align: "left" },
            { name: "faultNo", width: 50 },
            { name: "description", width: 400, align: "left" }
        ],
        prmNames: { id: "contractSubcontractorId" },
        localReader: { id: "contractSubcontractorId" },
        cmTemplate: { autoResizable: true },
        autoresize: true,
        rownumbers: true,
        viewrecords: true,
        iconSet: "fontAwesome",
        autoResizing: { compact: true },
        treeGrid: true,
        treeGridModel: "adjacency",
        ExpandColumn: "numberOfOpenFaults"
    }).jqGrid("gridResize");
    $(".divLoading").hide();
};

var getGrid = function (callback, selectedSubcontractorId) {
    var url = GetHiddenField("sir-get-open-faults-list-url").replace("#", selectedSubcontractorId);
    dataService.getList(url, callback);
};

var reloadGridWithUpdatedData = function (data) {
    var grid = $("#grid");
    var p = grid.jqGrid("getGridParam"); // get reference to all parameters
    p.data = data; // replace data parameter
    grid.trigger("reloadGrid");
};

So when I want to repopulate the grid, the callback function in getGrid is reloadGridWithUpdatedData. Otherwise for the initial population of the grid I use the function populateGrid. The 2 functions are called correctly, but in the function reloadGridWithUpdatedData the line

var p = grid.jqGrid("getGridParam");

does not appear to be executed. It does not throw an exception either. Is it not finding anything?

UPDATE: When the data is first loaded, the data is divided into the correct columns depending on the name of the field, as you would expect. When the data is reloaded the data columns are in the order that they are in the data structure, ignoring the column names. This I find in the p.data property of the grid. So I made sure that the data structure is reorganised in the same order as the column names, but this does not make any difference, the grid fails to reload. So why is the reload failing to assign the new data to the data columns?

UPDATE2 - Initially the grid is empty. The data is loaded into the grid every time an item in a combo box is selected, so the data layout is the same. Using Fiddler I have captured the data for 2 successive combo selections;

Transfer-Encoding: chunked
Content-Type: application/json; charset=utf-8
Server: Kestrel
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:12528
X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcZ2VvZmZyZXlwYXluZVxEb2N1bWVudHNcVmlzdWFsIFN0dWRpbyAyMDE3XFByb2plY3RzXFNJUlxTSVJcYXBpXGNvbnRyYWN0cmVwb3J0XGdldGdyaWRieXN1YmNvbnRyYWN0b3JcNTg5XDE3?=
X-Powered-By: ASP.NET
Date: Mon, 22 Oct 2018 07:12:09 GMT

400
[{"numberOfOpenFaults":"1","fullAddress":"16, ACACIA ROAD, NORBURY, SW16 5PP","faultNo":"","description":"","id":4472,"parent":0,"level":0,"isLeaf":false,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"6","description":"General Mechanical - Thermostatic Mixing Valves","id":95,"parent":4472,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"3","fullAddress":"85, ACADEMY GARDENS, ADDISCOMBE, CR0 6QL","faultNo":"","description":"","id":4474,"parent":0,"level":0,"isLeaf":false,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"1","description":"General Mechanical - Low Temperature Hot Water","id":39,"parent":4474,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"4","description":"Boilers HIU - Ventilation","id":65,"parent":4474,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"9","description":"Gener
400
al Mechanical - Defect(s) Outstanding","id":70,"parent":4474,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"1","fullAddress":"8, ADMIRALS WALK, Tollers Estate COULSDON EAST, CR5 1BR","faultNo":"","description":"","id":4478,"parent":0,"level":0,"isLeaf":false,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"3","description":"Ventilation - Grilles/air valves","id":105,"parent":4478,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"4","fullAddress":"14, ASHWOOD GARDENS, FIELDWAY, CR0 0SH","faultNo":"","description":"","id":4492,"parent":0,"level":0,"isLeaf":false,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"4","description":"Certification Mechanical - Boiler Benchmark/Manual","id":79,"parent":4492,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"6","description":"Unvented HWS Cylinder (UHC) - Pipework configuration","i
8c
d":81,"parent":4492,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"7","descrip
374
tion":"Unvented HWS Cylinder (UHC) - Pipework configuration","id":86,"parent":4492,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"8","description":"General Mechanical - Dry Risers","id":87,"parent":4492,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"2","fullAddress":"31, ASHWOOD GARDENS, FIELDWAY, CR0 0SH","faultNo":"","description":"","id":4498,"parent":0,"level":0,"isLeaf":false,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"1","description":"General Mechanical - Waste","id":82,"parent":4498,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"2","description":"General Mechanical - Thermostatic Mixing Valves","id":83,"parent":4498,"level":1,"isLeaf":true,"expanded":false,"loaded":true}
1
]
0

HTTP/1.1 200 OK
Transfer-Encoding: chunked
Content-Type: application/json; charset=utf-8
Server: Kestrel
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:12528
X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcZ2VvZmZyZXlwYXluZVxEb2N1bWVudHNcVmlzdWFsIFN0dWRpbyAyMDE3XFByb2plY3RzXFNJUlxTSVJcYXBpXGNvbnRyYWN0cmVwb3J0XGdldGdyaWRieXN1YmNvbnRyYWN0b3JcNTg5XDE5?=
X-Powered-By: ASP.NET
Date: Mon, 22 Oct 2018 07:13:57 GMT

400
[{"numberOfOpenFaults":"2","fullAddress":"16, ACACIA ROAD, NORBURY, SW16 5PP","faultNo":"","description":"","id":4471,"parent":0,"level":0,"isLeaf":false,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"23","description":"Accessories - Existing not replaced/removed","id":106,"parent":4471,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"25","description":"Lighting - Emergency Lighting","id":123,"parent":4471,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"1","fullAddress":"85, ACADEMY GARDENS, ADDISCOMBE, CR0 6QL","faultNo":"","description":"","id":4473,"parent":0,"level":0,"isLeaf":false,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"4","description":"Alarms - Location","id":85,"parent":4473,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"1","fullAddress":"137, ACADEMY GARDENS, ADDISCOMBE, CR0 6QN","faultNo":"","des
400
cription":"","id":4475,"parent":0,"level":0,"isLeaf":false,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"6","description":"Alarms - Location","id":110,"parent":4475,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"1","fullAddress":"18, CHERTSEY CRESCENT, NEW ADDINGTON, CR0 0DA","faultNo":"","description":"","id":4573,"parent":0,"level":0,"isLeaf":false,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"2","description":"Earthing and Bonding - Supplementary bonding","id":137,"parent":4573,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"2","fullAddress":"Plot 2, 29, The Street, Geoff Close, , N1 7PL","faultNo":"","description":"","id":8705,"parent":0,"level":0,"isLeaf":false,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"1","description":"Lighting - Type","id":170,"parent":8705,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberO
310
fOpenFaults":"","fullAddress":"","faultNo":"2","description":"Certification Electrical - Fire Alarm Certificate","id":171,"parent":8705,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"2","fullAddress":"Wenlock Barn Estate Hoxton Hackney, N1 7PL","faultNo":"","description":"","id":8899,"parent":0,"level":0,"isLeaf":false,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"1","description":"Accessories - Type/quantity/setting-out","id":179,"parent":8899,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"2","description":"General Electrical - Incorrect circuit protective device","id":180,"parent":8899,"level":1,"isLeaf":true,"expanded":false,"loaded":true}]
0

You didn't included ana **test data** in the text of your question. The current information isn't enough for reproducing the problem. Additionally you wrote "When the data is reloaded the data columns are in the order that they are in the data structure, ignoring the column names", which sounds suspected. If you use `p.data = data;` for refreshing the data, then the format of `data` have to be **the same** like in `p.data`. It should be array of objects with properties `contractSubcontractorId`, `numberOfOpenFaults`, `fullAddress`, `faultNo` and `description`. Is it your case? — Oleg, Oct 21 '18 at 09:22
I have updated the question with more details about how the data is retreived and the actual data that is retieved. The first data set is rendered and the second isn't, unless I refresh the page first. — arame3333, Oct 22 '18 at 08:11
One solution that does work is: grid.jqGrid("GridUnload"); populateGrid(data); However I would still like to know why the code in the question does not work. — arame3333, Oct 22 '18 at 10:01

score 1 · Accepted Answer · answered Oct 22 '18 at 18:22

First of all the data, which you use have small, but important problem. One have to replace

"parent": 0

property in all root elements of the grid to

"parent": null

It fixes the problem with sorting in the TreeGrid. See the old answer for more details.

To understand the problem with reloading of TreeGrid data one need to look in the following lines of free jqGrid code:

// fix to allow to load TreeGrid using datatype:"local", data:mydata instead of treeGrid: true
if (p.treeGrid && p.datatype === "local" && p.data != null && p.data.length > 0) {
    p.datatype = "jsonstring";
    p.datastr = p.data;
    p.data = [];
}

populate.call(ts);

see here. It means that the code of free jqGrid allows to use datatype: "local" and data parameter as input to simplify the usage of TreeGrid, but it uses still the old jqGrid method for loading TreeGrid data.

Because of that reloading of TreeGrid data will be a little other, for example the following:

var reloadGridWithUpdatedData = function (data) {
    var grid = $("#grid"),
        p = grid.jqGrid("getGridParam");

    p.data = [];
    p.datatype = "jsonstring";
    p.datastr = data;

    grid[0].grid.populate.call(grid[0]);
};

See the corresponding demo here: https://jsfiddle.net/OlegKi/o1bhpLyu/

score 0 · Answer 2 · answered Oct 21 '18 at 16:01

0

var reloadGridWithUpdatedData = function (data) {
    var grid = $("#grid");
    grid.clearGridData();
    grid.jqGrid('setGridParam', {data:data)});
    grid.trigger("reloadGrid");
};

I have made some modification to your existing code. Please retry with the updated code and check.You need to clear the existing data and reset it with setGridParam before reloading the grid.

answered Oct 21 '18 at 16:01

coderboy_4200

53
1
6

It clears the grid OK but does not repopulate it with the new incoming data. – arame3333 Oct 22 '18 at 09:35

Free JqGrid - grid does not refresh

2 Answers2

Linked