Configuring Grid from JSON

I have a very simple structure:

Filtering in Smart Rendering mode

the json file:
{head:
[ {id:“Lfd”, width:150, align:“left”, sort:“str”, value:“Lfd”},
{id:“Jahr”, width:150, align:“left”, sort:“str”, value:“Jahr”}
],
rows: [ {id:18,“data”:[“18”,“2003”]} ]}

but I get the javscript error :
TypeError: this.obj.firstChild is null
dhtmlXGridObject.prototype._insertRowAt()
dhtmlxgrid.js:9
dhtmlXGridObject.prototype.render_dataset()
dhtmlxgrid.js:9
dhtmlXGridObject.prototype._process_json()
dhtmlxgrid.js:9
dhtmlXGridObject.prototype.load/this.xmlLoader()
dhtmlxgrid.js:9
window.dhx4.ajax._call/n.onreadystatechange/<()

I cannot recognize my error
or may be not possible to defnie a grid via json file?
thanks
Hermann

On your page you are including the js file for the dhtmlxSuite (where the dhtmlxGrid is already included) and js file for the dhtmlxGrid.

Please, try to use one of these files.

Also, please make sure that you are using the PRO version of the dhtmlxGrid as the init from the json is available in PRO version only.

Hi, I just try to run the sample in localhost: dhtmlx.com/docs/products/dhtmlxG … _json.html with the community package (Version 5.0 Standard), but i get error TypeError: this.obj.firstChild is null located in dhtmlx.js (line 9, column 833370)…

Then, i downloaded the dhtmlx.js of your samples site (dhtmlx.com/docs/products/codebase/dhtmlx.js) and also the .css file to my localhost… And runs perfectly… of course, i get the message This version of dhtmlxSuite is not intended for using outside of dhtmlx.com

Chrome says: dhtmlx.js:9 Uncaught TypeError: Cannot read property ‘appendChild’ of null

The mentioned sample works well in the standard version of the dhtmlxgrid.
Could you please, share with your non-working demo so the problem can be reconstructed locally.

The html is exactly as the sample page:

<!DOCTYPE html>
<!--pro-->
<html>
<head>
	<title>Configuration from JSON - DHTMLX Json</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<script>
		var myGrid;
		function doOnLoad(){
			myGrid = new dhtmlXGridObject('gridbox');
			myGrid.setImagePath("../../../codebase/imgs/");
			myGrid.enableAutoWidth(true);
			myGrid.load("../common/gridConfig.json", "json");
		}
		function ser(){
			myGrid.setSerializationLevel(false,false,true);
			document.getElementById("alfa1").innerHTML=myGrid.serialize().replace(/\</g,"&lt;").replace(/\>/g,"&gt;").replace(/\&lt;row/g,"<br/>&lt;row");
		}
	</script>
</head>
<body onload="doOnLoad()">
	<h1>Configuration from JSON - DHTMLX Json</h1>
	<p>Configuration of grid can be loaded from JSON file. You need only 2-3 script commands to get the grid up and running.</p>
	<div id="gridbox" style="width:600px; height:300px; background-color:white;"></div>
	<a href='#alfa' onClick="if(myGrid.setSerializationLevel){ser();} else {alert('Available in Pro Edition only')}">Serialize grid</a>
	<a name="alfa">
		<div id="alfa1"></div>
	</a>
</body>
</html>

I create the file in the \samples\dhtmlxGrid\12_initialization_loading folder, so, should be no problem, the gridConfig.json file is in \samples\dhtmlxGrid\common, and the content is:

{
   head:[
      { width:70,  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",
               "1"] },
       {  id:1002, 
          data:[
               "1000",
               "Blood and Smoke",
               "Stephen King",
               "0",
               "1",
               "1"] },
       {  id:1003, 
          data:[
               "-200",
               "The Rainmaker",
               "John Grisham",
               "7.99",
               "0",
               "2"] }
   ]
}

With the dhtmlx.js of the sample page works perfectly (as i said before), but, with the dhtmlx.js file of the standard suite doesn’t:

/*
Product Name: dhtmlxSuite 
Version: 5.0 
Edition: Standard 
License: content of this file is covered by GPL. Usage outside GPL terms is prohibited. To obtain Commercial or Enterprise license contact sales@dhtmlx.com
Copyright UAB Dinamenta http://www.dhtmlx.com
*/

With the dhtmlxgrid.js 5.0 standard file i get the same firebug error:

TypeError: this.obj.firstChild is null ..._isKHTML){this.obj.appendChild(c)}else{this.obj.firstChild.appendChild(c)}}else{... dhtmlxgrid.js (línea 9, columna 385226)
error points to …}else{this.obj…

With dhtmlx.js suit, the firebug error is:

TypeError: this.obj.firstChild is null ..._isKHTML){this.obj.appendChild(e)}else{this.obj.firstChild.appendChild(e)}}else{... dhtmlx_.js (línea 9, columna 833370)
error points to …}else{this.obj…

Could you pleas,e provide with a complete demo, where the problem can be reconstructed locally.
Here you can find a tutorial about creating a complete demo:
docs.dhtmlx.com/tutorials__auxil … pport.html

Here is the demo…
I hope it helps… thanks…
grid-json.zip (815 KB)

I apologize, this is my inattention.

Init of the grid from json is available in PRO version.

OK!!! it explains all!!!.. thanks for the reply, and apologizes for taking so long…