DHTMLX Docs & Samples Explorer

Index
dhtmlxgrid

## Syntax Templates

### Description of XML Syntax

XML Syntax in dhtmlxGrid is the following:

        <?xml version='1.0' encoding='iso-8859-1'?>
        <rows>
            <userdata name="NameOfGlobalUserDataBlock"></userdata>
            <row id="unique_rowid">
                <userdata name="NameOfRowUserDataBlock"></userdata>
                <cell>cell content</cell>
                <cell><![CDATA[<font color="red">cell</font> content]]></cell>
            </row>
        </rows>

In PHP script, the following code for page header should be used:

        <?php
            header("Content-type: text/xml");
            echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
        ?>

The user should bear in mind the following:

- <rows> node is mandatory. It can contain grid related <userdata> blocks and rows (<row>). Its attributes are:
  - total_count - use with smart rendering to tell the grid the total quantity of rows;
  - pos - use with smart rendering with dynamical loading to tell the grid position of the first row.
- <row> node can contain row related <userdata> blocks and cells (<cell>). Its attributes are:
  - style - css style definition;
  - class - css class name;
  - id - id of the row (must be unique).
- <cell> node contain cell value. It can contain HTML (use CDATA block if the user includes htmlx tags) or XML (since v.1.2). Its attributes are:
  - style - css style definition;
  - type - cell type (if differs from column type); since v.1.2.
- <userdata> should be used to set userdata directly within XML. It has value to specify userdata value and just one parameter:
  - name

#### Defining Combo through XML

The list of options for combo can be defined from XML in two ways:

- With column configuration the values will be set for all cells in a column:

        <rows>
            <head>
                <column type="co"> Combo column
                    <option value="1"> First </option>
                    <option value="2"> Second </option>
                    <option value="3"> Third </option>
                </column>

- For separate cells (professional version only):

        <rows>
            <row id="some1">
                <cell> some </cell>
                <cell> some </cell>
                <cell xmlcontent="true">1<option value="1">The first</option><option value="2">The second</option></cell>
                <cell> some </cell>
            </row>
        </rows>

### Setting Cell Type Explicitly through XML

#### XML Syntax

        <row>
            <cell type="ed">Simple text editor</cell>
            <cell type="txt">Multiline Text Editor</cell>
            <cell>Default (as was set for column) eXcell type</cell>
            ...
        <row>

#### Default XML Format

The default XML format is the following:

            <rows>
                <row id="some">
                    <cell > data </cell>

#### Custom XML Format

The user can change used tags names like this:

            grid.xml.top="mytop";
            grid.xml.row="./myrow";
            grid.xml.cell="./mycell";
        </script>

In such case, the grid will expect the XML to be written in the following format:

         <mytop>
             <myrow id="some">
                 <mycell> data </mycell>

The row and cell parameters are XPaths, so the user can create more complex schemas:

            grid.xml.top="mytop"
            grid.xml.row="./some/myrow"
            grid.xml.cell="./mycell[@show=true]"

            <mytop>
                <some>
                     <myrow id="some">
                        <mycell> will not be used </mycell>
                        <mycell show="true"> data </mycell>

#### Additional XML Formats

The grid supports two additional XML formats that are based on column ids (ext/dhtxmlgrid_data.js).

- xmlA

            grid.setColumnIds("first,second,third");
            grid.load(url,"xmlA");

            <rows>
                <row id="some" first="11" second="12" third="13" />
                <row id="some" first="21" second="22" third="23" />
                <row id="some" first="31" second="32" third="33" />
            </rows>

If the user uses MSSQL, he can use SELECT * FROM Some FOR XML AUTO to get data exactly in the necessary format.

- xmlB

            grid.setColumnIds("first,second,third")
            grid.load(url,"xmlB")

            <rows>
                <row id="some"><first>11</first><second>12</second><third>13</third></row>
                <row id="some"><first>21</first><second>22</second><third>23</third></row>
                <row id="some"><first>31</first><second>32</second><third>33</third></row>
            </rows>

Both formats can be customized in the same manner as the default XML format.

### JSON Format Details

Top level object contains a collection of rows, each row has a mandatory data array containing data for all cells. Each row representing an object may contain additional parameters; they will affect the grid in the same manner as attributes of row tag in case of loading from XML.

    {total_count:50000,
    pos:0,
    rows:[
           {  id:1002,
              selected:true, // select row
              style:"color:red;", // assign style
              userdata:{"name1":"ud1","name2":"ud2"},//setting row userdata
         data:[
              "1000",
              "Blood and Smoke",
              {"value":"Stephen King","type":"ed"},//change cell type
              ]
           }
    ]}

See also:Initialization of TreeGrid