Reload does not work

Question

In my jqGrid I use the multiselect parameter so that there is a checkbox on each row. The grid shows a list where each row has an "Open" status. A number of rows may be checked and when the "Close Faults from Subcontractor" button is clicked, all the ticked entries will be assigned a new status of "closed". As this grid only displays "open" entries, the database is requeried and a new list of open entries needs to be displayed. To do this the grid needs to be reloaded with the new data. Currently the reloadGrid is not working, the same data is shown as before.

$(function () {
    getDataForGrid(populateGrid);
});

var populateGrid = function (data) {
    var grid = $("#grid");
    grid.jqGrid({
        data: data,
        multiselect: true,
        colNames: ["Category", "Description", "Opened", "Urgency", "Location"],
        colModel: [
            { name: "category", index: "category", width: 200, align: "left" },
            { name: "description", index: "description", width: 200, align: "left" },
            {
                name: "dateOpened",
                index: "dateOpened",
                width: 100,
                align: "left",
                formatter: "date",
                formatoptions: { newformat: "d-M-Y" }
            },
            { name: "urgency", label: "urgency", width: 200, align: "left" },
            { name: "location", label: "location", width: 100, align: "left" }
        ],
        //guiStyle: "bootstrap",
        prmNames: { id: "faultId" },
        localReader: { id: "faultId" },
        cmTemplate: { autoResizable: true },
        rowNum: 20,
        pager: "#pager",
        shrinkToFit: true,
        rownumbers: true,
        sortname: "category",
        viewrecords: true
    }).jqGrid("gridResize")
        .navGrid("#pager", {
            edit: false,
            add: false,
            del: false,
            search: false,
            refresh: false
        }).navButtonAdd("#pager",
        {
            caption: "Close Faults from Subcontractor",
            buttonicon: "ui-icon-circle-check",
            position: "first",
            title: "Blue Button",
            onClickButton: function () {
                var pdfFile = $("#documentName").val();
                if (pdfFile === undefined || pdfFile === null || pdfFile.length === 0) {
                    errorValidationMessage("You must upload a Subcontractor's confirmation pdf first before closing faults");
                    return false;
                }

                var selRowIds = grid.jqGrid("getGridParam", "selarrrow");
                if (selRowIds.length === 0) {
                    errorValidationMessage("You did not select any faults to close");
                    return false;
                }

                var contractSubcontractorId = GetHiddenField("sir-contract-subcontractor-id");
                var documentName = pdfFile.replace(/\\/g, "/").replace(/.*\//, "");
                var url = GetHiddenField("sir-close-faults-from-subcontractor-url");
                var postData = JSON.stringify({ faultIds: selRowIds, contractSubcontractorId: contractSubcontractorId, documentName: documentName });
                var callback = reloadGrid;
                dataService.putData(url, postData, callback);
            }
        });
    $("#divLoading").hide();
}

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

var reloadGrid = function () {
    showSuccessMessage("Selected Properties Closed");
    getDataForGrid(reloadGridWithUpdatedData);
}

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

Answer 1

It seems to me that the reason of your problem is in the usage of setGridParam. The method should be worked only if you change parameters, which are not arrays. Your current code merges old data with new one (see the main line of code of setGridParam, which calls deep version of $.extend). In case of arrays you should use the second (overwrite) parameter of setGridParam:

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

or just don't use setGridParam at all. The method getGridParam gives the reference to internal object, which holds all parameters. It allows to replace (overwrite) any parameter in very simple way:

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