Update from JSON
Grid allows to update data from JSON
</> Source
<!DOCTYPE html>
<html>
<head>
<title>Update 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>
var 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>Update from JSON</h1>
<p>Grid allows to update data from JSON</p>
<div id="gridbox" style="width:500px; height:350px; background-color:white;"></div>
<br/>
<input type='button' onclick='myGrid.updateFromJSON("../common/update.json", false, false)' value='update from JSON'><br>
<input type='button' onclick='myGrid.updateFromJSON("../common/update.json", "top")' value='update from JSON (add)'><br>
<input type='button' onclick='myGrid.updateFromJSON("../common/update.json", true, true)' value='update from JSON (remove)'>
</body>
</html>
Documentation
Check documentation to learn how to use the components and easily implement them in your applications.