Question

I want to display some data that is stored locally in the client-side ( in the form of JS array) on the jqgrid. But when I use jqgrid 3.6.4, nothing happens, while for jqgrid 4.0.0, it works fine.

So, does jqgrid 3.6.4 support datatype:local, or is there another way to get the local data in this version of jqgrid?

My code snippet is as follows:
objArrayData is the data array.

jQuery("#testLookupTable").jqGrid({
                datatype: 'local',
                data: objArrayData,
                colNames:['Stmt ID','Code','Definition'],
                colModel:[
                        {name:'id',index:'id', width:0, align:'center', sortable:false, hidden:true},
                        {name:'code_Q',index:'code_Q', width:20, align:'center', sortable:false},
                        {name:'defn',index:'defn', width:20, align:'center', sortable:false}
                ],
                autowidth: true,
                hoverrows: true,
                gridview: true,
                height: '100px',
                sortname: 'id',
                viewrecords: true,
                sortorder: "desc",
                hidegrid: false  
            });

UPDATE:

The addRowData is not working properly. It is repeating the data in the array over and over. In IE, this is leading to stackoverflow.

My new snippet:

 jQuery("testLookupTable").jqGrid({
                datatype: 'local',
                //data: objArrayCR7,
                colNames:['Stmt ID','Code','Definition'],
                colModel:[
                        {name:'id',index:'id', width:0, align:'center', sortable:false, hidden:true},
                        {name:'code_Q',index:'code_Q', width:20, align:'center', sortable:false},
                        {name:'defn',index:'defn', width:20, align:'center', sortable:false}
                ],
                autowidth: true,
                hoverrows: true,
                gridview: true,
                height: '100px',
                sortname: 'id',
                viewrecords: true,
                sortorder: "desc",
                hidegrid: false,
                gridComplete: function(){
                    $('#testLookupTable').addRowData('code_Q',objArrayCR7);
                }  
            });

SOLVED (updated):

Found my mistake:

I should put this line:

  $('#testLookupTable').addRowData('code_Q',objArrayCR7);

outside of the .jqgrid().

Someone correct me if I am wrong, I found that every time the .addRowData() is run the grid reloads, so the gridComplete event is fired every time. This created an infinite loop in my previous code.

Answer 1

Filling of local jqGrid with respect of data: objArrayData is supported starting with 3.7 version. The most performance advantage of receive if you would use data parameter together with gridview: true.

In 3.6.4 version you have to fill grid with respect of addRowData.

I recommend you to use only the recent version of jqGrid. Currently it’s version 4.1.2.