How to load data (json) in jqgrid via 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?

I forgot to mention `root` in the `jsonReader`. See **UPDATED** part of my answer. — Oleg, Feb 05 '13 at 08:11

Oleg · Accepted Answer · 2013-02-05T08:10:37.943

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;
    }
}

hi oleg, tks for reply. i'll set jsonReader : { repeatitems: false,id: "clienteCode"}, but still not fill the data in jqgrid — Giacomo Savioli, Feb 05 '13 at 09:19
@GiacomoSavioli: Do you tried to use `root: function (obj) { return obj; }` (see updated part of my answer) — Oleg, Feb 05 '13 at 09:22
@Oleg: Can you help on this ? http://stackoverflow.com/questions/14684952/jqgrid-resize-last-column — Hardik Mishra, Feb 05 '13 at 11:43

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

1 Answers1