Run commands from XML
You are allowed to use methods before grid intialization:
The same as with script:
Also, you can run methods after grid intialization
The same as with script:
</> Source
<!DOCTYPE html>
<!--pro-->
<html>
<head>
<title>Run commands from XML</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>
function loadGridFromString(){
myGrid = new dhtmlXGridObject('gridbox');
myGrid.setDelimiter("|");
//myGrid.setStyle("text-align:center", "", "", "");
myGrid.setImagePath("../../../codebase/imgs/");
myGrid.parse(document.getElementById("gridcont1").value);
}
function loadGridFromString2(){
myGrid2 = new dhtmlXGridObject('gridbox2');
myGrid2.setImagePath("../../../codebase/imgs/");
myGrid2.parse(document.getElementById("gridcont2").value);
}
</script>
</head>
<body>
<h1>Run grid methods from XML</h1>
<p>You are allowed to use methods before grid intialization:</p>
<div>
<li>Example: <a href="javascript:void(0)" onClick="loadGridFromString()">Load grid with web skin</a> set from XML by calling setSkin method before grid initialization</li>
</div>
<br>
<div id="gridbox" style="width:650px; height:165px; background-color:white;"></div>
The same as with script:<br/>
<textarea id="gridcont1" style="width:650px;height:150px;"><?xml version="1.0" encoding="UTF-8"?>
<rows>
<head>
<beforeInit>
<call command="setSkin"><param>material</param></call>
<call command="setStyle"><param>text-align:center;</param></call>
</beforeInit>
<column width="70" type="dyn" align="right" sort="str">Sales</column>
<column width="150" type="ed" align="left" sort="str">Book Title</column>
<column width="100" type="ed" align="left" sort="str">Author</column>
<column width="80" type="price" align="right" sort="str">Price</column>
<column width="80" type="ch" align="center" sort="str">In Store</column>
<column width="80" type="co" align="left" sort="str">Shipping
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">10</option>
<option value="5">20</option>
<option value="6">30</option>
</column>
<column width="80" type="ra" align="center" sort="str">Bestseller</column>
<column width="100" type="ro" align="center" sort="str">Date of Publication</column>
<settings>
<colwidth>px</colwidth>
</settings>
</head>
<row id="1">
<cell>-1500</cell>
<cell>A Time to Kill</cell>
<cell>John Grisham</cell>
<cell>12.99</cell>
<cell>1</cell>
<cell>24</cell>
<cell>0</cell>
<cell>05/01/1998</cell>
</row>
<row id="2">
<cell>1000</cell>
<cell>Blood and Smoke</cell>
<cell>Stephen King</cell>
<cell>0</cell>
<cell>1</cell>
<cell>24</cell>
<cell>0</cell>
<cell>01/01/2000</cell>
</row>
<row id="3">
<cell>-200</cell>
<cell>The Rainmaker</cell>
<cell>John Grisham</cell>
<cell>7.99</cell>
<cell>0</cell>
<cell>48</cell>
<cell>0</cell>
<cell>12/01/2001</cell>
</row>
</rows>
</textarea>
<p>Also, you can run methods after grid intialization</p>
<div>
<li>Example: <a href="javascript:void(0)" onClick="loadGridFromString2()">Load grid and set the 2nd column hidden</a> by calling setColumnHidden method from xml after grid initialization</li>
</div><br>
<div id="gridbox2" style="width:650px;height:150px;background-color:white;"></div>
The same as with script:<br/>
<textarea id="gridcont2" style="width:650px;height:150px;"><?xml version="1.0" encoding="UTF-8"?>
<rows>
<head>
<afterInit>
<call command="setColumnHidden"><param>1</param><param>true</param></call>
</afterInit>
<column width="70" type="dyn" align="right" sort="str">Sales</column>
<column width="150" type="ed" align="left" sort="str">Book Title</column>
<column width="*" type="ed" align="left" sort="str">Author</column>
<column width="80" type="price" align="right" sort="str">Price</column>
<column width="80" type="ch" align="center" sort="str">In Store</column>
<column width="80" type="co" align="left" sort="str">Shipping
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">10</option>
<option value="5">20</option>
<option value="6">30</option>
</column>
<column width="80" type="ra" align="center" sort="str">Bestseller</column>
<column width="100" type="ro" align="center" sort="str">Date of Publication</column>
<settings>
<colwidth>px</colwidth>
</settings>
</head>
<row id="1">
<cell>-1500</cell>
<cell>A Time to Kill</cell>
<cell>John Grisham</cell>
<cell>12.99</cell>
<cell>1</cell>
<cell>24</cell>
<cell>0</cell>
<cell>05/01/1998</cell>
</row>
<row id="2">
<cell>1000</cell>
<cell>Blood and Smoke</cell>
<cell>Stephen King</cell>
<cell>0</cell>
<cell>1</cell>
<cell>24</cell>
<cell>0</cell>
<cell>01/01/2000</cell>
</row>
<row id="3">
<cell>-200</cell>
<cell>The Rainmaker</cell>
<cell>John Grisham</cell>
<cell>7.99</cell>
<cell>0</cell>
<cell>48</cell>
<cell>0</cell>
<cell>12/01/2001</cell>
</row>
</rows>
</textarea>
</body>
</html>
Documentation
Check documentation to learn how to use the components and easily implement them in your applications.