Serialize selected columns
setSerializableColumns method allows you to select which columns will be serialized.
|
Serialize all columns Serialize the first column Serialize the second column |
Load Grid from Text Area Serialize Grid |
</> Source
<!DOCTYPE html>
<!--pro-->
<html>
<head>
<title>Serialize selected columns</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.replace(/></g,">\n<");
}
function loadGridContent(){
myGrid.clearAll();
myGrid.parse(document.getElementById("mytextarea").value)
}
</script>
</head>
<body onload="doOnLoad()">
<h1>Serialize selected columns</h1>
<p>setSerializableColumns method allows you to select which columns will be serialized.</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>
<input type='radio' name='a1' checked onclick='myGrid.setSerializableColumns()' /> Serialize all columns <br/>
<input type='radio' name='a1' onclick='myGrid.setSerializableColumns("true,false")' />
Serialize the first column <br/>
<input type='radio' name='a1' onclick='myGrid.setSerializableColumns("false,true")' />
Serialize the second column
</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.