jqGrid add local data via javascript object

Question

My problem is the following :
- i'm using jqgrid to display local data
- this data is parsed from a webservice in several parts
- i get an array of object as data (can be changed)
- i try to add the new data parts by parts with addJSONData, no luck
- i also tried with setting the jqGrid parameter "data" to a merged array of the data parts, no luck

With some trys i get empty rows.
Using a formatter the rowObject is ok, but the cellValue is empty (undefined).
It seems that the colModel and the data structure are not "compatible".

I want to be able to add data to the grid in several parts.
The rows should be displayed sorted.

Here are the parameters :

{  
caption: 'Villes',  
data: [],  
datatype: 'local',  
colNames: ['Actions', 'Distance', 'Coordonnées', 'Nom', 'Joueur', 'Puissance', 'Alliance', 'Diplomatie', 'Brumes', 'Status'],  
colModel: [  
    {name: 'actions', sortable: false, search: false, formatter: Shared.gridRowActions, width: 50},  
    {name: 'range', index: 'range', width: 60},  
    {name: 'coords', index: 'gps', sortable: false, search: false, formatter: function( cellValue, options, rowObject ){ return Shared.mapLink(cellValue); }, width: 90},  
    {name: 'city', index: 'city'},  
    {name: 'player', index: 'player'},  
    {name: 'might', index: 'might', align: 'right', defval: 0, formatter: function( cellValue, options, rowObject ){ return Shared.format(cellValue); }, width: 70},  
    {name: 'guild', index: 'guild'},  
    {name: 'diplomacy', index: 'diplomacy', formatter: function( cellValue, options, rowObject ){ return Shared.getDiplomacy(cellValue); }, width: 70},  
    {name: 'mist', index: 'mist', align: 'center', formatter: function( cellValue, options, rowObject ){ return cellValue === 1 ? 'Oui' : ''; }, width: 55},  
    {name: 'user', index: 'user', formatter: function( cellValue, options, rowObject ){ return Shared.userStatusLink(cellValue); }}  
],  
pager: '#pager-cities',  
loadui: 'disable',  
rowNum: 20,  
rowList: [20, 50, 100],  
sortname: 'range',  
sortorder: 'asc',  
altRows: true,  
autowidth: true,  
viewrecords: true,  
gridview: true,  
multiselect: true,  
multiboxonly: true,  
multikey: 'shiftKey'  
}

And then the code for adding data to the grid.

var merged = [];
var $grid = $('#grid);
...
merged = merged.concat(cities);
$grid.jqGrid('setGridParam', {data: merged}).trigger('reloadGrid');

Also tried:

$grid[0].addJSONData( {page: 0, total: 0, records: cities.length, rows: cities} );

The data array is for exemple:

[
    {"id":338591,"cell":[2,"338,591","140","15545536","Lord Patrice02200","","0","Patrice02200",0]},
    {"id":339591,"cell":[2.24,"339,591","50","16300072","Lord mercedes9pd7e","","0","mercedes9pd7e",0]},
    {"id":341591,"cell":[3.61,"341,591","727714","16330552","Lord Torkan","","0","Rizane",0]},
    {"id":341592,"cell":[4.24,"341,592","490","10929616","Lord pulpfiction","","0","pietra",0]}
]

The only things i really need is the ability to load the data by parts and that the grid data are displayed sorted after each data add. A working pager will be a bonus.

Oleg Oleg · Accepted Answer · 2012-04-18T20:12:19

Your problem is that you have chosen very exotic format of data. The default format representation of the local data is array of objects with named properties. Additional property in the array items are expected id. You use another format so you have to add localReader parameter which describes the format of data

The demo

enter image description here

uses the same grid which you posted. I just added

localReader: {repeatitems: true}

and removed all formatters which code you not posted. The best way to fill the grid is to use data option with the input data. I added height: "auto" only for better look of the grid. So you will see

jqGrid add local data via javascript object

1 Answers