jqgrid with "local" datatype not displaying updated data when reloadGrid is triggered

Question

I have an webapp that uses a jqgrid with a the datatype set to "local". It's instantiated like this:

var LocalDataSource = getLocalDataSource();
$("#grid").jqGrid(
    {
        data: LocalDataSource.Rows,
        datatype: "local",
        gridComplete: onGridLoaded,
        (etc)
    }
);

where getLocalDataSource() returns an object containing an array of objects, like so:

{
    metadatax: "foo",
    metadatay: "bar",
    Rows: [
        {
            strValue: "baz1"
        },
        {
            strValue: "baz2"
        }
    ]
}

When the table first loads up, everything is working as expected. However, then I call the following function:

function mutateLocalDataSource(){
    LocalDataSource.Rows[0].strValue = "qux";
    $('#grid').trigger("reloadGrid");
}

At this point, I know that the jqgrid is refreshing (because onGridLoaded is being called), but the data displayed in the grid is never updated with "qux". Why isn't the grid reloading it's data from LocalDataSource when I trigger reloadGrid?

Answer 1

I was having trouble finding documentation on jqgrid, but it looks like when your datatype is set to local, the reloadGrid trigger does not re-reference the data unless you trigger a couple other methods first. Specifically, the following code worked for me:

I replaced

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

with

$('#grid')
.jqGrid('clearGridData')
.jqGrid('setGridParam',
    {
        data: LocalDataSource.Rows
    })
.trigger("reloadGrid");

If anyone knows why this only works this way, and not the way I had originally assumed, please let me know.