jqgrid Data not populating the Grid

Question

This is my first attempt with JQgrid and I am confused from the documentation as to if I need the jsonmap attribute with in my colmodel. As of now I’m getting all of the data but from firebug I see that all I’m getting in each col is:

Could someone explain what I am doing wrong exactly?

The Json:

{
"ROWS": [
    {
        "ID": 508,
        "CELLS": {
            "PHONE": "847-382-8872",
            "STATE": "IL",
            "ZIP": 60010,
            "NAME": "Norton's U.S.A.",
            "DESC": "We sell only products made in the United States!We offer an eclectic mix of common household items from toys to tools, glassware to garden supplies, fashions to food and so much more.  When you shop at Norton's U.S.A, you help keep America working!  ",
            "CITY": "Riverwoods",
            "ADDR": "400 Lageschulte Street"
        }
    }
],
"PAGE": 1,
"RECORDS": 1,
"TOTAL": 1
}

The Javascript:

$(function(){ 
  $("#list").jqGrid({
    url:'cfc/buildData.cfc?method=getDining',
    datatype: 'json',
    mtype: 'GET',
    colNames:['Member ID','Member Name', 'Address','City','Zip Code','State', 'Phone', 'Description'],
    colModel :[ 
      {name:'MEMBERID', index:'MEMBERID', jsonmap:'MEMBERID', width:60}, 
      {name:'NAME', index:'NAME', jsonmap:'NAME', width:90}, 
      {name:'ADDR', index:'ADDR', jsonmap:'ADDR', width:80, align:'right'},
      {name:'CITY', index:'CITY', jsonmap:'CITY', width:80, align:'right'}, 
      {name:'ZIP', index:'ZIP', jsonmap:'ZIP', width:80, align:'right'},
      {name:'STATE', index:'STATE', jsonmap:'STATE', width:80, align:'right'},
      {name:'PHONE', index:'PHONE', jsonmap:'PHONE', width:80, align:'right'},  
      {name:'DESC', index:'DESC', jsonmap:'DESC', width:200, sortable:false} 
    ],
    pager: '#pager',
    rowNum: 10,
    rowList:[10,20,30],
    sortname: 'MEMBERID',
    sortorder: 'desc',
    viewrecords: true,
    gridview: true,
    caption: 'Lake County Members',

    jsonReader : {
       root: "ROWS",
       page: "PAGE",
       total: "TOTAL",
       records: "RECORDS",
       repeatitems: true,
       cell: "CELLS",
       id: "MEMBERID",
       subgrid: {root:"ROWS", 
          repeatitems: true, 
          cell:"CELLS"
       }
     }

  }); 
});

Oleg · Accepted Answer

The documentation about jsonReader and jsonmap is really difficult for the first reading.

The most important property of the jsonReader is repeatitems. Default value is repeatitems: true. It means that the format of the rows of data in the JSON should be

{"id" :"1", "cell": ["cell11", "cell12", "cell13"]}

It's important to mention that the cell property should has array of strings as the value. The jsonmap property of the colModel will be ignored.

If you would just use jsonReader: {repeatitems: true} you would overwrite only one property of the default jsonReader. So the format of the data which represent the row in the JSON input should be

{"id": "abc", "col1": false, "col3": 123, "col2": "cell12"}

In the case no cell property should be used in the input. The data for the column will be identified by name instead of by position in the cell array. The property name col1, col2, col3 can be either from the name property of colModel or from the jsonmap if it's defined.

In case of more complex format of input like

{"id": "abc", "col1": false, "coordinates": {"x": 123, "y": "cell12"}}

you can define for the x column jsonmap: coordinates.x and for the y column jsonmap: coordinates.y.

In case of your example I would recommend you to change format of the JSON data to

{
    "ROWS": [
        {
            "ID": 508,
            "PHONE": "847-382-8872",
            "STATE": "IL",
            "ZIP": 60010,
            "NAME": "Norton's U.S.A.",
            "DESC": "We sell only products made in the United States!We offer an eclectic mix of common household items from toys to tools, glassware to garden supplies, fashions to food and so much more.  When you shop at Norton's U.S.A, you help keep America working!  ",
            "CITY": "Riverwoods",
            "ADDR": "400 Lageschulte Street"
        }
    ],
    "PAGE": 1,
    "RECORDS": 1,
    "TOTAL": 1
}

to remove 'MEMBERID' from the column model because you don't included any data in the JSON input.
remove sortname: 'MEMBERID' or change it to some existing columns.
remove all jsonmap properties

The jsonReader should be used as

jsonReader : {
     root: "ROWS",
     page: "PAGE",
     total: "TOTAL",
     records: "RECORDS",
     repeatitems: false,
     id: "ID",
 }

The value of ids of the rows of the grid (the ids for elements of the table) will be get from the 'ID' property of the JSON input. You should be careful with the values for the ids: there must be unique on the whole page.

After the above changes the grid will display the data: see the demo. I added height: 'auto' parameter only to reduce the size of unneeded space in the grid.

jqgrid Data not populating the Grid

Answers (1)

Related Questions