<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxgrid.js"></script>        
<script  src="../../codebase/dhtmlxgridcell.js"></script>    
 
 
<table width="600">
    <tr>
        <td>
            <div id="gridbox" style="width:100%;height:270px;background-color:white;"></div>
        </td>
        <td width="20"></td>
        <td><textarea id="mytextarea" style="width:250px;height:250px;"><?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></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>
<br>
<script>
function serializeGrid() {
    mygrid.setSerializationLevel(true, true);
    var myXmlStr = mygrid.serialize();
    document.getElementById("mytextarea").value = myXmlStr.replace(/></g, ">\n<");
}
function loadGridContent() {
    mygrid.clearAll();
    mygrid.loadXMLString(document.getElementById("mytextarea").value);
}
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Column A, Column B");
mygrid.setInitWidths("100,250");
mygrid.setColAlign("right,left");
mygrid.setColTypes("ro,ed");
mygrid.setColSorting("int,str");
mygrid.setSkin("dhx_skyblue");
mygrid.init();</script>