Serialize Grid and Load from String
You can get actual state of grid (in xml string) using serialization possibility. Define either you want to serialize the complete grid structure (including userdata blocks,selection state) or only cells values
|
Set UserData to selected row GetUserData from selected row |
Load Grid from Text Area Serialize Grid |
</> Source
<!DOCTYPE html>
<!--pro-->
<html>
<head>
<title>Serialize Grid and Load from String</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.setHeader("Column A, Column B");
myGrid.setInitWidths("100,180");
myGrid.setColAlign("right,left");
myGrid.setColTypes("ro,ed");
myGrid.setColSorting("int,str");
myGrid.init();
}
function serializeGrid(){
myGrid.setSerializationLevel(true,true);
var myXmlStr = myGrid.serialize();
document.getElementById("mytextarea").value = myXmlStr;
}
function loadGridContent(){
myGrid.clearAll();
myGrid.parse(document.getElementById("mytextarea").value)
}
</script>
</head>
<body onload="doOnLoad()">
<h1>Serialize Grid and Load from String</h1>
<p>You can get actual state of grid (in xml string) using serialization possibility.
Define either you want to serialize the complete grid structure (including userdata blocks,selection state) or only cells values
</p>
<table width="770px">
<tr>
<td>
<div id="gridbox" style="width:100%;height:350px;background-color:white;"></div>
</td>
<td><textarea id="mytextarea" style="width:300px;height:345px;"><?xml version="1.0" encoding="iso-8859-1"?><rows><row id='r1'><cell>index is 1</cell><cell>load turn started from 1</cell></row><row id='r2'><cell>index is 2</cell><cell>load turn started from 1</cell></row><row id='r3'><cell>index is 3</cell><cell>load turn started from 1</cell></row><row id='r4'><cell>index is 4</cell><cell>load turn started from 1</cell></row><row id='r5'><cell>index is 5</cell><cell>load turn started from 1</cell></row><row id='r6'><cell>index is 6</cell><cell>load turn started from 1</cell></row><row id='r7'><cell>index is 7</cell><cell>load turn started from 1</cell></row><row id='r8'><cell>index is 8</cell><cell>load turn started from 1</cell></row><row id='r9'><cell>index is 9</cell><cell>load turn started from 1</cell></row><row id='r10'><cell>index is 10</cell><cell>load turn started from 1</cell></row><row id='r11'><cell>index is 11</cell><cell>load turn started from 1</cell></row><row id='r12'><cell>index is 12</cell><cell>load turn started from 1</cell></row><row id='r13'><cell>index is 13</cell><cell>load turn started from 1</cell></row><row id='r14'><cell>index is 14</cell><cell>load turn started from 1</cell></row><row id='r15'><cell>index is 15</cell><cell>load turn started from 1</cell></row><row id='r16'><cell>index is 16</cell><cell>load turn started from 1</cell></row><row id='r17'><cell>index is 17</cell><cell>load turn started from 1</cell></row><row id='r18'><cell>index is 18</cell><cell>load turn started from 1</cell></row><row id='r19'><cell>index is 19</cell><cell>load turn started from 1</cell></row><row id='r20'><cell>index is 20</cell><cell>load turn started from 1</cell></row><row id='r21'><cell>index is 21</cell><cell>load turn started from 1</cell></row><row id='r22'><cell>index is 22</cell><cell>load turn started from 1</cell></row><row id='r23'><cell>index is 23</cell><cell>load turn started from 1</cell></row><row id='r24'><cell>index is 24</cell><cell>load turn started from 1</cell></row><row id='r25'><cell>index is 25</cell><cell>load turn started from 1</cell></row><row id='r26'><cell>index is 26</cell><cell>load turn started from 1</cell></row><row id='r27'><cell>index is 27</cell><cell>load turn started from 1</cell></row><row id='r28'><cell>index is 28</cell><cell>load turn started from 1</cell></row><row id='r29'><cell>index is 29</cell><cell>load turn started from 1</cell></row><row id='r30'><cell>index is 30</cell><cell>load turn started from 1</cell></row><row id='r31'><cell>index is 31</cell><cell>load turn started from 1</cell></row><row id='r32'><cell>index is 32</cell><cell>load turn started from 1</cell></row><row id='r33'><cell>index is 33</cell><cell>load turn started from 1</cell></row><row id='r34'><cell>index is 34</cell><cell>load turn started from 1</cell></row><row id='r35'><cell>index is 35</cell><cell>load turn started from 1</cell></row><row id='r36'><cell>index is 36</cell><cell>load turn started from 1</cell></row><row id='r37'><cell>index is 37</cell><cell>load turn started from 1</cell></row><row id='r38'><cell>index is 38</cell><cell>load turn started from 1</cell></row><row id='r39'><cell>index is 39</cell><cell>load turn started from 1</cell></row><row id='r40'><cell>index is 40</cell><cell>load turn started from 1</cell></row><row id='r41'><cell>index is 41</cell><cell>load turn started from 1</cell></row><row id='r42'><cell>index is 42</cell><cell>load turn started from 1</cell></row><row id='r43'><cell>index is 43</cell><cell>load turn started from 1</cell></row><row id='r44'><cell>index is 44</cell><cell>load turn started from 1</cell></row><row id='r45'><cell>index is 45</cell><cell>load turn started from 1</cell></row><row id='r46'><cell>index is 46</cell><cell>load turn started from 1</cell></row><row id='r47'><cell>index is 47</cell><cell>load turn started from 1</cell></row><row id='r48'><cell>index is 48</cell><cell>load turn started from 1</cell></row><row id='r49'><cell>index is 49</cell><cell>load turn started from 1</cell></row><row id='r50'><cell>index is 50</cell><cell>load turn started from 1</cell></row><row id='r51'><cell>index is 51</cell><cell>load turn started from 1</cell></row></rows></textarea></td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="myGrid.setUserData(myGrid.getSelectedId(),prompt('Name:'),prompt('Value:'))">Set UserData to selected row</a><br>
<a href="javascript:void(0)" onclick="alert(myGrid.getUserData(myGrid.getSelectedId(),prompt('Name:')))">GetUserData from selected row</a>
</td>
<td>
<a href="javascript:void(null)" onclick="loadGridContent()">Load Grid from Text Area</a><br>
<a href="javascript:void(null)" onclick="serializeGrid()">Serialize Grid</a>
</td>
</tr>
</table>
</body>
</html>
Documentation
Check documentation to learn how to use the components and easily implement them in your applications.