jqGrid has no addJSONData method
Solution 1
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.
Solution 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.
Solution 3
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 ...
Mike Christensen
Founder and Chief Architect of KitchenPC.com, the world's most powerful recipe search engine. The technology behind KitchenPC is open-source, and available on GitHub.
Updated on June 04, 2022Comments
-
Mike Christensen almost 2 years
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 onjQuery("#list4").jqGrid
, just not this one.addXMLData
is also missing. However, I can verify that these methods are in thejquery.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:
-
Mike Christensen about 12 yearsHi - The problem is I don't have the data when the page loads. A user clicks a button to load the data depending on their search criteria. When the user clicks the button, I need to clear out any existing data in the grid and load new data.
AddJSONData
was the only thing I found that would do that, everything else wanted me to pass in a datasource to the grid initializer.. -
Oleg about 12 years@MikeChristensen: If you need don't load the grid at the page loading you can start with
datatype: 'local'
. Then if the user set some criteria and click on "Search" button you can change the datatype to'json'
usingsetGridParam
and reload the grid. Look at the answer and this one for more details. jqGrid clear previous data (existing data) in the grid automatically. -
Mike Christensen about 12 yearsAwesome, thanks so much! This is enough info to get the ball rolling.. On Monday anyway.. Right now I don't care about grids..