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