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});

score 18 · Accepted Answer · edited Mar 13 '12 at 19:40

18

Maybe try reloading the grid afterwards?

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

edited Mar 13 '12 at 19:40

Shane Courtrille

13,960
22
76
113

answered Feb 23 '11 at 22:45

Ewan Heming

4,628
2
21
20

Yes, I just figured it out and came back to answer my own question and found yours. Thanks! – John Livermore Feb 23 '11 at 22:47
@John: I am not sure with the last version, but probably one need call `refreshIndex` after the update of `data` parameter (see http://stackoverflow.com/questions/3414774/problem-with-deleting-jqgrid-row-data-client-side/3415086#3415086). It can be that `relodGrid` do already all the work. Moreover you should include in items of `gridData` array `id` property or use `localReader` to define which column of grid can be interpret as the id. For example `localReader: {id:'col1'}` – Oleg Feb 23 '11 at 22:58
1

this solution doesn't work, when the grid is loaded with different data in the same page, n number of times. The old data remains and the new data gets added to it. Because setGridParam uses jquery.extend internally.[Click to see more](http://www.trirand.com/blog/?page_id=393/help/triggerreloadgrid-not-work/) – Infant Dev Mar 08 '13 at 10:53

score 0 · Answer 2 · answered Sep 15 '14 at 02:13

0

@infantDev If I understood good what you were trying to say: I think you have to do a GridUnload

$("#jqgrid-panel-contents").jqGrid('GridUnload');

before to add the new data

answered Sep 15 '14 at 02:13

yngrdyn

363
3
13

score 0 · Answer 3 · answered Jan 29 '20 at 02:47

Solution from Ewan Heming (above) won't work with Free JQGrid (at least with version 4.15.2) when there is data loaded in the grid and you want to modify the data.

however following which was suggested by Oleg (I can't remember where) will work and it will also set your grid pager to 1 in case your new data doesn't have that many pages.

var gParams = $('#myGrid').jqGrid("getGridParam");
gParams.data = data;
$('#myGrid').trigger("reloadGrid", [{page: 1}]);

setting jqGrid data after the grid has been created

3 Answers3