jqGrid - Table not being populated by data from json request

Question

Hi,

I am trying to get a grid displayed using jqGrid. Everything seems to work fine. The table is being render, but all the cells are empty. All the other infos are on the table (page number, total pages, number of rows). When trying to change page, the json data is being retrieved without any problem.

Here is a snip of my code:

<script type="text/javascript">
$(document).ready(function() {
  $("#list2").jqGrid({
      url:'/ajax/list/facture',
      datatype: "json",          
      colModel:[
       {label:'N° d\'article', name: 'code', width:90},
       {label:'Article', name: 'article', width:100},
       {label:'Entrepôt', name: 'entrepot', width:80, align:"right"},
       {label:'Limite', name: 'limite', width:80, align:"right"},
       {label:'À commander', name: 'qte_a_commander', width:80,align:"right"},
       {label:'Déjà commander', name: 'qte_deja_commander', width:150},
       {label:'Coût', name: 'cout', width:150},
       {label:'Prix', name: 'prix', width:150},
       {label:'Coût total', name: 'cout_total', width:150}
      ],
      rowNum:100,
      scoll: true,
      //rowList:[10,20,30],
      pager: '#pager2',
      //sortname: 'code',
      viewrecords: true,
      sortorder: "desc",
      jsonReader: {
        repeatitems : false,
        id: "0"
      },
      //sortorder: "desc",
      caption:"Inventaire",

      width: 1200,
      height: 200


  });

  $("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});


 });


</script>

<table id="list2"></table>
<div id="pager2"></div>

My json data being sent:

{
  "page":"1",
  "total":33,
  "records":"100",
  "rows":[
    {"id":1,"cell":{"code":"0064NB","article":"Livre","entrepot":"4","limite":"3","qte_a_commander":"3","qte_deja_commander":"0","cout":"3.40","prix":"30.99","cout_total":"13.60"}},
    {"id":2,"cell":{"code":"0072NB","article":"Livre et corrig\u00e9","entrepot":"5","limite":"3","qte_a_commander":"3","qte_deja_commander":"0","cout":"3.40","prix":"30.99","cout_total":"17.00"}}
    /*[... got over 100 fields ...]*/
  ]}  

Answer 1

I don't think that this is the right format. The JSONReader you defined expects JSON data like this

{
  "page":"1",
  "total":33,
  "records":"100",
  "rows":[
    {"id":1,"code":"0064NB","article":"Livre","entrepot":"4","limite":"3","qte_a_commander":"3","qte_deja_commander":"0","cout":"3.40","prix":"30.99","cout_total":"13.60"},
    {"id":2,"code":"0072NB","article":"Livre et corrig\u00e9","entrepot":"5","limite":"3","qte_a_commander":"3","qte_deja_commander":"0","cout":"3.40","prix":"30.99","cout_total":"17.00"}
    /*[... got over 100 fields ...]*/
  ]}

Read the chapter about retrieving data in the jqGrid wiki. I actually found it easier to change my server side JSON output instead of defining a custom reader for jQGrid.

Answer 2

Well, was able to get it working using index instead of names

  colModel:[
   {label:'Code', index: 'code', width:90},
   {label:'Article', index: 'article', width:100},
   {label:'Entrepôt', index: 'entrepot', width:80, align:"right"},
   {label:'Limite', index: 'limite', width:80, align:"right"},
   {label:'À commander', index: 'qte_a_commander', width:80,align:"right"},
   {label:'Déjà commander', index: 'qte_deja_commander', width:150},
   {label:'Coût', index: 'cout', width:150},
   {label:'Prix', index: 'prix', width:150},
   {label:'Coût total', index: 'cout_total', width:150}
  ],

And by not naming my json data:

{
  "page":"1",
  "total":33,
  "records":"100",
  "rows":
    [
      {"id":1,"cell":["0064NB","Livre","4","3","3","0","3.40","30.99","13.60"]},
      {"id":2,"cell":["0072NB","Livre corrig\u00e9","5","3","3","0","3.40","30.99","17.00"]}
    ]
}