dhtmlxgrid:syntax_templates [Skin test wiki]

- Syntax Templates

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.

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
     data:[
          "1000",
          "Blood and Smoke",
          {"value":"Stephen King","type":"ed"},//change cell type
          ]
       }
]}