Check documentation for the latest version of dhtmlxSuite Configuring Grid from XML DHTMLX Docs

Configuring Grid from XML

Grid can be configured directly in the XML file that the data is loaded from. In this case, you will need only 2-3 script commands to get the grid up and running. Moreover, you can also run grid's methods from an XML file.
All the necessary settings, e.g. columns types, are specified inside <head></head> tag.

Do not call the init method when configuring the grid from XML.


Initializing the grid configured through XML

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../codebase/imgs/");
mygrid.load("grid.xml"); // XML containing configuration block together with data


"grid.xml" file

<rows> 
 <head>      
   <column width="50" type="ed" align="right" color="white" sort="str">Sales</column>  
   <column width="80" type="co" align="left" sort="str">
        <option value="1">1 Day</option> 
        <option value="7">1 Week</option> 
        ...
   </column> 
 
   <beforeInit> 
        <call command="methodName">
            <param>string value</param>
        </call> 
   </beforeInit> 
   <afterInit>  
        <call command="methodName">
            <param>string value</param>
        </call> 
   </afterInit> 
 
    <settings> 
        <colwidth>%</colwidth> //'says' to use width in percents instead of pixels
    </settings> 
 </head> 
 <row> 
     <cell>value1</cell>
     <cell>value2</cell>
 </row>
</rows>

Related sample:  Sample without title: dhtmlxGrid/samples/12_initialization_loading/11_pro_config_ext.html


Possible attributes for the <column></column> tag:

  • width - the column's width in pixels
  • type - the column's type
  • align - the text alignment in the column
  • color - the background color of the column
  • sort - the sorting type of the column
  • id - the column's id
  • hidden - if the attribute is set, the column will be hidden.

Running grid's methods from XML

<rows> 
    <head> 
        <beforeInit> 
            <call command="setSkin"><param>xp</param></call> 
        </beforeInit> 
        <afterInit> 
            <call command="setColumnHidden"><param>1</param><param>true</param></call> 
        </afterInit> 
    </head>
</rows>

Related sample:  Sample without title: dhtmlxGrid/samples/12_initialization_loading/11_pro_config_ext.html


The same but called with script:

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue")
mygrid.setHeader("Book name,Terms and Conditions,#cspan,#cspan");
mygrid.init();
mygrid.setColumnHidden(1,true);
Back to top