How to load data (json) in jqgrid via ajax? - ajax

Question

i need to populate jqgrid after ajax's call.
I have a function (in java servelet) that returns this json format:
[{"citta":"XXXX","via":"XXX","telefono":"1111-11111","provincia":"XX","clienteDesc":"Prova","clienteCode":"XXXXX"}]
and i use this code for the jqgrid:
$("#clienti-navgrid").jqGrid( {
//data: c
//datatype: "local"
datatype: "json",
url: '/project/loadnotespese.do',
colNames:['Codice Cliente','Descrizone Cliente','Via','Città','Provincia','Telefono'],
colModel:[
{name:'clienteCode', index:'clienteCode', width:'10', sortable:false},
{name:'clienteDesc', index:'clienteDesc', width:'20', sortable:false},
{name:'via', index:'via', width:'30', sortable:false},
{name:'citta', index:'citta', width:'20', sortable:false},
{name:'provincia', index:'provincia', width:'10', sortable:false},
{name:'telefono', index:'telefono', width:'10', sortable:false}
],
rowNum:500,
autowidth:true,
height:'auto',
recordtext:"Ordini trovati {2}",
emptyrecords:"Nessun risultato",
viewrecords: true,
caption: 'Tabella Clienti',
localReader : {
//
repeatitems: false,
}
});//jqGrid
if i put
var c = [{"citta":"XXXX","via":"XXX","telefono":"1111-11111","provincia":"XX","clienteDesc":"Prova","clienteCode":"XXXXX"}]
and
data: c, datatype: "local",
works, but if i'll get from url: '/project/loadnotespese.do', it dosen't work.
Any help?

Answer 1

If you use datatype: "local" the option localReader will be used. By the way the value repeatitems: false is default value for localReader (see the documentation). So in case of usage datatype: "local" you can event remove the current option localReader: { repeatitems: false } from the list of the options.
On the other side if you use datatype: "json" another option jsonReader will be used. The default value of repeatitems property of jsonReader is repeatitems: false (see the documentation). So you have to add
jsonReader: { repeatitems: false }
in the case to the list of jqGrid options. After that the grid should be successfully filled.
One other important think which is important to know is specifying additional of id property in every item of the row of data. The id value must be unique over the whole page and it will be used as the value of id attributes of the rows (<tr>) elements of the grid body. If some other property of the row items can be used as the unique id you can either include additional setting in jsonReader or add key: true property in the corresponding definition of the column in colModel. For example if clienteCode can be interpreted as the rowid you can use
jsonReader: { repeatitems: false, id: "clienteCode" }
UPDATED: You should use additionally
root: function (obj) { return obj; }
inside of jsonReader (see here). So the final jsonReader should be
jsonReader: {
repeatitems: false,
id: "clienteCode",
root: function (obj) {
return obj;
}
}