Loading from JSON

Grid allows to load data from JSON file and object.


Reload from JSON object
</> Source
<!DOCTYPE html>
<html>
<head>
	<title>Loading from 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>
		data={
		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"] },
		   { id:1004,
		 data:[
			  "350",
			  "The Green Mile",
			  "Stephen King",
			  "11.10",
			  "1",
			  "01/01/1992"] },
		   { id:1005,
		 data:[
			  "700",
			  "Misery",
			  "Stephen King",
			  "7.70",
			  "0",
			  "01/01/2003"] },
		   { id:1006,
		 data:[
			  "-1200",
			  "The Dark Half",
			  "Stephen King",
			  "0",
			  "0",
			  "10/30/1999"] },
		   { id:1007,
		 data:[
			  "1500",
			  "The Partner",
			  "John Grisham",
			  "12.99",
			  "1",
			  "01/01/2005"] },
		   { id:1008,
		 data:[
			  "500",
			  "It",
			  "Stephen King",
			  "9.70",
			  "0",
			  "10/15/2001"] },
		   { id:1009,
		 data:[
			  "400",
			  "Cousin Bette",
			  "Honore de Balzac",
			  "0",
			  "1",
			  "12/01/1991"] },
		   { id:10010,
		 data:[
			  "400",
			  "Cousin Bette",
			  "Honore de Balzac",
			  "0",
			  "1",
			  "12/01/1991"] },
			{ id:1011,
		 data:[
			  "101",
			  "A Time to Kill",
			  "John Grisham",
			  "12.99",
			  "1",
			  "05/01/1998"] },
		   { id:1012,
		 data:[
			  "1000",
			  "Blood and Smoke",
			  "Stephen King",
			  "0",
			  "1",
			  "01/01/2000"] },
		   { id:1013,
		 data:[
			  "-200",
			  "The Rainmaker",
			  "John Grisham",
			  "7.99",
			  "0",
			  "12/01/2001"] },
		   { id:1014,
		 data:[
			  "350",
			  "The Green Mile",
			  "Stephen King",
			  "11.10",
			  "1",
			  "01/01/1992"] },
		   { id:1015,
		 data:[
			  "700",
			  "Misery",
			  "Stephen King",
			  "7.70",
			  "0",
			  "01/01/2003"] },
		   { id:1016,
		 data:[
			  "-1200",
			  "The Dark Half",
			  "Stephen King",
			  "0",
			  "0",
			  "10/30/1999"] },
		   { id:1017,
		 data:[
			  "1500",
			  "The Partner",
			  "John Grisham",
			  "12.99",
			  "1",
			  "01/01/2005"] },
		   { id:1018,
		 data:[
			  "500",
			  "It",
			  "Stephen King",
			  "9.70",
			  "0",
			  "10/15/2001"] },
		   { id:1019,
		 data:[
			  "400",
			  "Cousin Bette",
			  "Honore de Balzac",
			  "0",
			  "1",
			  "12/01/1991"] },
		   { id:10110,
		 data:[
			  "400",
			  "Cousin Bette",
			  "Honore de Balzac",
			  "0",
			  "1",
			  "12/01/1991"] },



			{ id:1021,
		 data:[
			  "102",
			  "A Time to Kill",
			  "John Grisham",
			  "12.99",
			  "1",
			  "05/01/1998"] },
		   { id:1022,
		 data:[
			  "1000",
			  "Blood and Smoke",
			  "Stephen King",
			  "0",
			  "1",
			  "01/01/2000"] },
		   { id:1023,
		 data:[
			  "-200",
			  "The Rainmaker",
			  "John Grisham",
			  "7.99",
			  "0",
			  "12/01/2001"] },
		   { id:1024,
		 data:[
			  "350",
			  "The Green Mile",
			  "Stephen King",
			  "11.10",
			  "1",
			  "01/01/1992"] },
		   { id:1025,
		 data:[
			  "700",
			  "Misery",
			  "Stephen King",
			  "7.70",
			  "0",
			  "01/01/2003"] },
		   { id:1026,
		 data:[
			  "-1200",
			  "The Dark Half",
			  "Stephen King",
			  "0",
			  "0",
			  "10/30/1999"] },
		   { id:1027,
		 data:[
			  "1500",
			  "The Partner",
			  "John Grisham",
			  "12.99",
			  "1",
			  "01/01/2005"] },
		   { id:1028,
		 data:[
			  "500",
			  "It",
			  "Stephen King",
			  "9.70",
			  "0",
			  "10/15/2001"] },
		   { id:1029,
		 data:[
			  "400",
			  "Cousin Bette",
			  "Honore de Balzac",
			  "0",
			  "1",
			  "12/01/1991"] },
		   { id:10210,
		 data:[
			  "400",
			  "Cousin Bette",
			  "Honore de Balzac",
			  "0",
			  "1",
			  "12/01/1991"] },



			{ id:1031,
		 data:[
			  "103",
			  "A Time to Kill",
			  "John Grisham",
			  "12.99",
			  "1",
			  "05/01/1998"] },
		   { id:1032,
		 data:[
			  "1000",
			  "Blood and Smoke",
			  "Stephen King",
			  "0",
			  "1",
			  "01/01/2000"] },
		   { id:1033,
		 data:[
			  "-200",
			  "The Rainmaker",
			  "John Grisham",
			  "7.99",
			  "0",
			  "12/01/2001"] },
		   { id:1034,
		 data:[
			  "350",
			  "The Green Mile",
			  "Stephen King",
			  "11.10",
			  "1",
			  "01/01/1992"] },
		   { id:1035,
		 data:[
			  "700",
			  "Misery",
			  "Stephen King",
			  "7.70",
			  "0",
			  "01/01/2003"] },
		   { id:1036,
		 data:[
			  "-1200",
			  "The Dark Half",
			  "Stephen King",
			  "0",
			  "0",
			  "10/30/1999"] },
		   { id:1037,
		 data:[
			  "1500",
			  "The Partner",
			  "John Grisham",
			  "12.99",
			  "1",
			  "01/01/2005"] },
		   { id:1038,
		 data:[
			  "500",
			  "It",
			  "Stephen King",
			  "9.70",
			  "0",
			  "10/15/2001"] },
		   { id:1039,
		 data:[
			  "400",
			  "Cousin Bette",
			  "Honore de Balzac",
			  "0",
			  "1",
			  "12/01/1991"] },
		   { id:10310,
		 data:[
			  "400",
			  "Cousin Bette",
			  "Honore de Balzac",
			  "0",
			  "1",
			  "12/01/1991"] },
			{ id:1041,
		 data:[
			  "104",
			  "A Time to Kill",
			  "John Grisham",
			  "12.99",
			  "1",
			  "05/01/1998"] },
		   { id:1042,
		 data:[
			  "1000",
			  "Blood and Smoke",
			  "Stephen King",
			  "0",
			  "1",
			  "01/01/2000"] },
		   { id:1043,
		 data:[
			  "-200",
			  "The Rainmaker",
			  "John Grisham",
			  "7.99",
			  "0",
			  "12/01/2001"] },
		   { id:1044,
		 data:[
			  "350",
			  "The Green Mile",
			  "Stephen King",
			  "11.10",
			  "1",
			  "01/01/1992"] },
		   { id:1045,
		 data:[
			  "700",
			  "Misery",
			  "Stephen King",
			  "7.70",
			  "0",
			  "01/01/2003"] },
		   { id:1046,
		 data:[
			  "-1200",
			  "The Dark Half",
			  "Stephen King",
			  "0",
			  "0",
			  "10/30/1999"] },
		   { id:1047,
		 data:[
			  "1500",
			  "The Partner",
			  "John Grisham",
			  "12.99",
			  "1",
			  "01/01/2005"] },
		   { id:1048,
		 data:[
			  "500",
			  "It",
			  "Stephen King",
			  "9.70",
			  "0",
			  "10/15/2001"] },
		   { id:1049,
		 data:[
			  "400",
			  "Cousin Bette",
			  "Honore de Balzac",
			  "0",
			  "1",
			  "12/01/1991"] },
		   { id:10410,
		 data:[
			  "400",
			  "Cousin Bette",
			  "Honore de Balzac",
			  "0",
			  "1",
			  "12/01/1991"] },
			{ id:1051,
		 data:[
			  "105",
			  "A Time to Kill",
			  "John Grisham",
			  "12.99",
			  "1",
			  "05/01/1998"] },
		   { id:1052,
		 data:[
			  "1000",
			  "Blood and Smoke",
			  "Stephen King",
			  "0",
			  "1",
			  "01/01/2000"] },
		   { id:1053,
		 data:[
			  "-200",
			  "The Rainmaker",
			  "John Grisham",
			  "7.99",
			  "0",
			  "12/01/2001"] },
		   { id:1054,
		 data:[
			  "350",
			  "The Green Mile",
			  "Stephen King",
			  "11.10",
			  "1",
			  "01/01/1992"] },
		   { id:1055,
		 data:[
			  "700",
			  "Misery",
			  "Stephen King",
			  "7.70",
			  "0",
			  "01/01/2003"] },
		   { id:1056,
		 data:[
			  "-1200",
			  "The Dark Half",
			  "Stephen King",
			  "0",
			  "0",
			  "10/30/1999"] },
		   { id:1057,
		 data:[
			  "1500",
			  "The Partner",
			  "John Grisham",
			  "12.99",
			  "1",
			  "01/01/2005"] },
		   { id:1058,
		 data:[
			  "500",
			  "It",
			  "Stephen King",
			  "9.70",
			  "0",
			  "10/15/2001"] },
		   { id:1059,
		 data:[
			  "400",
			  "Cousin Bette",
			  "Honore de Balzac",
			  "0",
			  "1",
			  "12/01/1991"] },
		   { id:10510,
		 data:[
			  "400",
			  "Cousin Bette",
			  "Honore de Balzac",
			  "0",
			  "1",
			  "12/01/1991"] },
			{ id:1061,
		 data:[
			  "106",
			  "A Time to Kill",
			  "John Grisham",
			  "12.99",
			  "1",
			  "05/01/1998"] },
		   { id:1062,
		 data:[
			  "1000",
			  "Blood and Smoke",
			  "Stephen King",
			  "0",
			  "1",
			  "01/01/2000"] },
		   { id:1063,
		 data:[
			  "-200",
			  "The Rainmaker",
			  "John Grisham",
			  "7.99",
			  "0",
			  "12/01/2001"] },
		   { id:1064,
		 data:[
			  "350",
			  "The Green Mile",
			  "Stephen King",
			  "11.10",
			  "1",
			  "01/01/1992"] },
		   { id:1065,
		 data:[
			  "700",
			  "Misery",
			  "Stephen King",
			  "7.70",
			  "0",
			  "01/01/2003"] },
		   { id:1066,
		 data:[
			  "-1200",
			  "The Dark Half",
			  "Stephen King",
			  "0",
			  "0",
			  "10/30/1999"] },
		   { id:1067,
		 data:[
			  "1500",
			  "The Partner",
			  "John Grisham",
			  "12.99",
			  "1",
			  "01/01/2005"] },
		   { id:1068,
		 data:[
			  "500",
			  "It",
			  "Stephen King",
			  "9.70",
			  "0",
			  "10/15/2001"] },
		   { id:1069,
		 data:[
			  "400",
			  "Cousin Bette",
			  "Honore de Balzac",
			  "0",
			  "1",
			  "12/01/1991"] },
		   { id:10610,
		 data:[
			  "400",
			  "Cousin Bette",
			  "Honore de Balzac",
			  "0",
			  "1",
			  "12/01/1991"] },
			{ id:1071,
		 data:[
			  "107",
			  "A Time to Kill",
			  "John Grisham",
			  "12.99",
			  "1",
			  "05/01/1998"] },
		   { id:1072,
		 data:[
			  "1000",
			  "Blood and Smoke",
			  "Stephen King",
			  "0",
			  "1",
			  "01/01/2000"] },
		   { id:1073,
		 data:[
			  "-200",
			  "The Rainmaker",
			  "John Grisham",
			  "7.99",
			  "0",
			  "12/01/2001"] },
		   { id:1074,
		 data:[
			  "350",
			  "The Green Mile",
			  "Stephen King",
			  "11.10",
			  "1",
			  "01/01/1992"] },
		   { id:1075,
		 data:[
			  "700",
			  "Misery",
			  "Stephen King",
			  "7.70",
			  "0",
			  "01/01/2003"] },
		   { id:1076,
		 data:[
			  "-1200",
			  "The Dark Half",
			  "Stephen King",
			  "0",
			  "0",
			  "10/30/1999"] },
		   { id:1077,
		 data:[
			  "1500",
			  "The Partner",
			  "John Grisham",
			  "12.99",
			  "1",
			  "01/01/2005"] },
		   { id:1078,
		 data:[
			  "500",
			  "It",
			  "Stephen King",
			  "9.70",
			  "0",
			  "10/15/2001"] },
		   { id:1079,
		 data:[
			  "400",
			  "Cousin Bette",
			  "Honore de Balzac",
			  "0",
			  "1",
			  "12/01/1991"] },
		   { id:10710,
		 data:[
			  "400",
			  "Cousin Bette",
			  "Honore de Balzac",
			  "0",
			  "1",
			  "12/01/1991"] },
			{ id:1081,
		 data:[
			  "108",
			  "A Time to Kill",
			  "John Grisham",
			  "12.99",
			  "1",
			  "05/01/1998"] },
		   { id:1082,
		 data:[
			  "1000",
			  "Blood and Smoke",
			  "Stephen King",
			  "0",
			  "1",
			  "01/01/2000"] },
		   { id:1083,
		 data:[
			  "-200",
			  "The Rainmaker",
			  "John Grisham",
			  "7.99",
			  "0",
			  "12/01/2001"] },
		   { id:1084,
		 data:[
			  "350",
			  "The Green Mile",
			  "Stephen King",
			  "11.10",
			  "1",
			  "01/01/1992"] },
		   { id:1085,
		 data:[
			  "700",
			  "Misery",
			  "Stephen King",
			  "7.70",
			  "0",
			  "01/01/2003"] },
		   { id:1086,
		 data:[
			  "-1200",
			  "The Dark Half",
			  "Stephen King",
			  "0",
			  "0",
			  "10/30/1999"] },
		   { id:1087,
		 data:[
			  "1500",
			  "The Partner",
			  "John Grisham",
			  "12.99",
			  "1",
			  "01/01/2005"] },
		   { id:1088,
		 data:[
			  "500",
			  "It",
			  "Stephen King",
			  "9.70",
			  "0",
			  "10/15/2001"] },
		   { id:1089,
		 data:[
			  "400",
			  "Cousin Bette",
			  "Honore de Balzac",
			  "0",
			  "1",
			  "12/01/1991"] },
		   { id:10810,
		 data:[
			  "400",
			  "Cousin Bette",
			  "Honore de Balzac",
			  "0",
			  "1",
			  "12/01/1991"] },
			{ id:1091,
		 data:[
			  "109",
			  "A Time to Kill",
			  "John Grisham",
			  "12.99",
			  "1",
			  "05/01/1998"] },
		   { id:1092,
		 data:[
			  "1000",
			  "Blood and Smoke",
			  "Stephen King",
			  "0",
			  "1",
			  "01/01/2000"] },
		   { id:1093,
		 data:[
			  "-200",
			  "The Rainmaker",
			  "John Grisham",
			  "7.99",
			  "0",
			  "12/01/2001"] },
		   { id:1094,
		 data:[
			  "350",
			  "The Green Mile",
			  "Stephen King",
			  "11.10",
			  "1",
			  "01/01/1992"] },
		   { id:1095,
		 data:[
			  "700",
			  "Misery",
			  "Stephen King",
			  "7.70",
			  "0",
			  "01/01/2003"] },
		   { id:1096,
		 data:[
			  "-1200",
			  "The Dark Half",
			  "Stephen King",
			  "0",
			  "0",
			  "10/30/1999"] },
		   { id:1097,
		 data:[
			  "1500",
			  "The Partner",
			  "John Grisham",
			  "12.99",
			  "1",
			  "01/01/2005"] },
		   { id:1098,
		 data:[
			  "500",
			  "It",
			  "Stephen King",
			  "9.70",
			  "0",
			  "10/15/2001"] },
		   { id:1099,
		 data:[
			  "400",
			  "Cousin Bette",
			  "Honore de Balzac",
			  "0",
			  "1",
			  "12/01/1991"] },
		   { id:10910,
		 data:[
			  "400",
			  "Cousin Bette",
			  "Honore de Balzac",
			  "0",
			  "1",
			  "12/01/1991"] }
			  ]
		};
		var myGrid;
		function doOnLoad(){
			myGrid = new dhtmlXGridObject('gridbox');
			myGrid.setImagePath("../../../codebase/imgs/");
			myGrid.setHeader("Sales, Book Title, Author");
			myGrid.setInitWidths("70,250,*");
			myGrid.setColAlign("right,left,left");
			myGrid.setColTypes("dyn,ed,ed");
			myGrid.setColSorting("int,str,str");
			myGrid.init();
			myGrid.load("../common/data.json","json");
		}
	</script>
</head>
<body onload="doOnLoad()">
	<h1>Loading from JSON</h1>
	<p>Grid allows to load data from JSON file and object.</p>
	<div id="gridbox" style="width:500px; height:350px; background-color:white;"></div>
	<br>
	<a href="javascript:void(0)" onclick='myGrid.clearAll();alert("old data cleared\nloading new one..."); myGrid.parse(data,"json")'>Reload from JSON object</a><br/>
</body>
</html>

Documentation

Check documentation to learn how to use the components and easily implement them in your applications.