Configuring Grid from JSON

The grid can be configured directly in the JSON data source that the data is loaded from. You need only 2-3 script commands to get the grid up and running.

Configuring Grid from JSON

mygrid = new dhtmlXGridObject('gridbox');  
mygrid.setImagePath("../codebase/imgs/"); 
mygrid.setSkin("dhx_skyblue");                
mygrid.load("grid.json","json");// JSON containing config block together with data


You can specify data either in the basic JSON format or in the native JSON format. To learn more about these formats, read the Exploring Supported Data Formats article.

Basic JSON format

"grid.json" file

{
    head:[
       { width:50,  type:"dyn",   align:"right",  sort:"int", value:"Sales"},
       { width:150, type:"ed",    align:"left",   sort:"str", value:"Book Title"},
       { width:100, type:"ed",    align:"left",   sort:"str", value:"Author"},
       { width:80,  type:"price", align:"right",  sort:"str", value:"Price"},
       { width:80,  type:"ch",    align:"center", sort:"str", value:"In Store"},
       { width:80,  type:"co",    align:"left",   sort:"str", value:"Shipping",
        options:[
          { id:1, value:"Fast"},
          { id:2, value:"Slow"},
        ]}
   ],
    rows:[
        {  id:1001,
          data:[
            "100",
               "A Time to Kill",
               "John Grisham",
               "12.99",
               "1",
               "05/01/1998"] },
       {  id:1002, 
          data:[
               "1000",
               "Blood and Smoke",
               "Stephen King",
               "0",
               "1",
               "01/01/2000"] },
       {  id:1003, 
          data:[
               "-200",
               "The Rainmaker",
               "John Grisham",
               "7.99",
               "0",
               "12/01/2001"] }
]}


Native JSON format

Please note that you need to define the columns' ids using the setColumnIds method in accordance with the keys names in the "key:value" pairs of data objects. It will ensure that values will be loaded into the right columns.

"grid.json" file

{
 head:[
  {id:"sales",  width:50,  type:"dyn",  align:"right", sort:"int", value:"Sales"},
  {id:"title",  width:150, type:"ed",   align:"left",  sort:"str", value:"Book Title"},
  {id:"author", width:100, type:"ed",   align:"left",  sort:"str", value:"Author"},
  {id:"price",  width:80,  type:"price", align:"right",  sort:"str", value:"Price"},
  {id:"instore",  width:80, type:"ch",   align:"center", sort:"str", value:"In Store"},
  {id:"shipping", width:80, type:"co",   align:"left",   sort:"str", value:"Shipping"}
 ],
 data:[
    { 
      id:1001, 
      sales:"100",
      title:"A Time to Kill",
      author:"John Grisham",
      price:"12.99",
      instore:"1",
      shipping:"05/01/1998"
    },
    {
      id:1002, 
      sales:"1000",
      title:"Blood and Smoke",
      author:"Stephen King",
      price:"0",
      instore:"1",
      shipping:"01/01/2000"
    },
    {
      id:1003, 
      sales:"-200",
      title:"The Rainmaker",
      author:"John Grisham",
      price:"7.99",
      instore:"0",
      shipping:"12/01/2001"
    }
 ]}


Header-related settings

  1. id - (string|number) the column's id
  2. width - (number) the column's width
  3. type - (string) the column's type
  4. align - (string) the column's alignment
  5. sort - (string) the sorting type
  6. value - (string) the column's title
{
 head:[
  {id:"sales",   width:50,  type:"dyn", align:"right", sort:"int", value:"Sales"},
  {id:"title",   width:150, type:"ed",  align:"left",  sort:"str", value:"Book Title"},
  {id:"author",  width:100, type:"ed",  align:"left",  sort:"str", value:"Author"},
  {id:"price",   width:80,  type:"price", align:"right",  sort:"str", value:"Price"},
  {id:"instore", width:80,  type:"ch",   align:"center", sort:"str", value:"In Store"},
  {id:"shipping", width:80, type:"co",   align:"left",   sort:"str", value:"Shipping"}
 ]}

Related sample:  Loading from JSON

Back to top