jqGrid has no addJSONData method

Question

I'm just playing around with jqGrid this afternoon, and have it working fairly well with a local array data source. However, now I'm trying to get it to load local JSON data.

My code is as follows:

jQuery("#list4").jqGrid({
   datatype: "json", //<-- Also tried "local" here
   height: 'auto',
   autowidth: true,
   forceFit: true,
   colNames:['ID','Name'],
   colModel:[
      {name:'id',index:'id', width:60, sorttype:"int", jsonmap:"id"},
      {name:'name',index:'name', width:90, jsonmap: "name"}
   ],
   multiselect: false,
   caption: "Test"
});

I then try to load JSON data using the following:

jQuery("#list4").jqGrid.addJSONData(json);

The issue is that jQuery("#list4").jqGrid.addJSONData is undefined. I've also tried:

jQuery("#list4").jqGrid('addJSONData', json);

Which throws an exception saying that the method addJSONData is not defined. I can see other documented methods on jQuery("#list4").jqGrid, just not this one. addXMLData is also missing. However, I can verify that these methods are in the jquery.jqGrid.min.js source code.

I just downloaded jqGrid today, so I know I have the latest versions of everything.

I must be doing something wrong, but I'm not sure what it could be. I've put the entire page here:

http://pastie.org/3825067

Answer 1

I'm working with version jqGrid 4.1.2 Having initialized the grid with a JSONReader and datatype:'jsonstring', when adding jsonstring data I've to include the datatype:'jsonstring' parameter.

$('#list4').setGridParam({ datastr: jsonData, datatype:'jsonstring', rowNum: jsonData.length }).trigger('reloadGrid');

As far as I know that is because after initialize the datatype:'jsonstring' is turned to datatype:'local', so when adding jsonstring it tries to load data from "data" param instead of "datastr" but because is empty no data is loaded.

I hope to contribute to this ...

Answer 2

For the most part, you are close. I don't think the addJSONData method is the way to go. Here's how we deal with local JSON data:

The grid:

$("#list4").jqGrid({
   datatype: "local", //<-- "local" tells jqGrid not to try and get the data itself
   height: 'auto',
   autowidth: true,
   forceFit: true,
   colNames:['ID','Name'],
   colModel:[
      {name:'id',index:'id', width:60, sorttype:"int", jsonmap:"id"},
      {name:'name',index:'name', width:90, jsonmap: "name"}
   ],
   multiselect: false,
   caption: "Test"
});

Give data to the grid:

// Clear the grid if you only want the new data
$('#list4').clearGridData(true); 
// Set the data the tell the grid to refresh
$('#list4').setGridParam({ data: jsonData, rowNum: jsonData.length }).trigger('reloadGrid');

You should also change your jsonData to:

var jsonData = [
  {id: 1, name: 'Apple'},
  {id: 2, name: 'Banana'},
  {id: 3, name: 'Pear'},
  {id: 4, name: 'Orange'}
];

jqGrid is going to look to match up the columns specified to the objects passed into the array.

Answer 3

The addJSONData is very old method which uses still expandos to the DOM element of the grid (<table> element). So to use addJSONData correctly one should use

jQuery("#list4")[0].addJSONData(json);

See the documentation. More beter way will be to create jqGrid and fill the data directly. You can use

jQuery("#list4").jqGrid({
    datatype: "local",
    data: mydata,
    height: 'auto',
    autowidth: true,
    colNames: ['ID', 'Name'],
    colModel: [
        {name: 'id', index: 'id', width: 60, sorttype: "int", key: true},
        {name: 'name', index:'name', width: 90}
    ],
    caption: "Test",
    gridview: true // !!! improve the performance
});

The format of mydata can be like

var mydata = [
        {id: 10, name: "Oleg"},
        {id: 20, name: "Mike"}
    ];

It's allow to use local paging, filtering and sorting of data. The input data need not be sorted.

Alternatively you can use datatype: 'jsonstring' and datastr. The value of datastr can be either JSON string or already parsed object. The data from datastr have to be correctly sorted (if you use some sortname and sortorder parameters) and have the same format as for datatype: 'json' (see the documentation). One can use jsonReader and jsonmap to specify the data format:

var mydata = {
        //total: 1,  // will be ignored
        //page: 1,   // will be ignored
        //records: 2 // will be ignored
        rows: [
            {id: 10, name: "Oleg"},
            {id: 20, name: "Mike"}
        ]
    ];

What is the most strange for me is why you need to load "local JSON data"? Where is the difference to the "local array data source"? You can use $.parseJSON to convert the input data to object or use datatype: 'jsonstring' directly. In the most cases the usage of addJSONData is because of loading the data from the server manually per jQuery.ajax which is really bed idea (see one from my first posts on the stackoverflow here). jqGrid has a lot of customization options and callbackes like ajaxGridOptions, serializeGridData and beforeProcessing, you can use functions in jsonReader (see here) and jsonmap, which allows you to load practically any format of input data. Using prmNames, serializeGridData and postData (see here) you can make practically any customization of the parameters sent to the server. So the usage of low-level addJSONData are needed really in extremely very seldom scenarios.