setting jqGrid data after the grid has been created

Question

The following example code will load a jqGrid (this code works) ...

jQuery(document).ready(function () {
    var gridData = [
                { col1: 'cell11', col2: 'cell12', col3: 'cell13' },
                { col1: 'cell21', col2: 'cell22', col3: 'cell23' }
                ];
    $('#myGrid').jqGrid({
        data: gridData,
        datatype: 'clientSide',
        colNames: ['Col1', 'Col2', 'Col3'],
        colModel: [
                        { name: 'col1' },
                        { name: 'col2' },
                        { name: 'col3' }
                        ]
    })

How would I rewrite the example so the gridData is set after the jqGrid is created? I tried this...

jQuery(document).ready(function () {
    var gridData = [
                { col1: 'cell11', col2: 'cell12', col3: 'cell13' },
                { col1: 'cell21', col2: 'cell22', col3: 'cell23' }
                ];
    $('#myGrid').jqGrid({
        datatype: 'clientSide',
        colNames: ['Col1', 'Col2', 'Col3'],
        colModel: [
                        { name: 'col1' },
                        { name: 'col2' },
                        { name: 'col3' }
                        ]
    })


    $('#myGrid')[0].data = gridData;

However the above code doesn't work. Can someone show me how please?

UPDATE: I also tried this for my last line, but it didn't work either...

    $('#jqgrid-panel-contents').jqGrid('setGridParam', {data: gridData});

Answer 1

Maybe try reloading the grid afterwards?

 $('#jqgrid-panel-contents').jqGrid('setGridParam', {data: gridData}).trigger('reloadGrid');