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.

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

id - (string|number) the column's id
width - (number) the column's width
type - (string) the column's type
align - (string) the column's alignment
sort - (string) the sorting type
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