DHTMLX Docs & Samples Explorer
All components
dhtmlxGrid
Initialazation/Loading

Run commands from XML

View page source

You are allowed to use methods before grid intialization:

  • Example: Load grid with skyblue skin set from XML by calling setSkin method before grid initialization

    • The same as with script:

    Also, you can run methods after grid intialization

  • Example: Load grid and set the 2nd column hidden by calling setColumnHidden method from xml after grid initialization

    • The same as with script:
    Source
    <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>
<script>
    function loadGridFromString() {
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setDelimiter("|");
    //mygrid.setStyle("text-align:center", "", "", "");
    mygrid.setImagePath("../../codebase/imgs/");
    //mygrid.setSkin("light");
    mygrid.loadXMLString(document.getElementById("gridcont1").value);
}
function loadGridFromString2() {
    mygrid2 = new dhtmlXGridObject('gridbox2');
    mygrid2.setImagePath("../../codebase/imgs/");
    mygrid2.setSkin("dhx_skyblue");
    mygrid2.loadXMLString(document.getElementById("gridcont2").value);
}
    </script>
 
 
<div>
    <li>Example:  <a href="javascript:void(0)" onClick="loadGridFromString()">Load grid with skyblue skin</a> set from XML by calling setSkin method before grid initialization</li>
</div>
<br>
<div id="gridbox" style="width:600px; height:100px; background-color:white;"></div>
The same as with script:<br/>
<textarea id="gridcont1" style="width:600px;height:100px;"><?xml version="1.0" encoding="UTF-8"?>
<rows>
<head>
    <beforeInit>
        <call command="setSkin">
<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:600px;height:100px;background-color:white;"></div>
The same as with script:<br/>
<textarea id="gridcont2" style="width:600px;height:100px;"><?xml version="1.0" encoding="UTF-8"?>
<rows>
<head>
    <afterInit>
        <call command="setColumnHidden"><param>1</param><param>true</param></call>
    </afterInit>
    <column width="50" 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="200" 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>
</rows>
</textarea>
    Copyright © 1998-2011 DHTMLX LTD.
    All rights reserved.