Check documentation for the latest version of dhtmlxSuite Initializing TreeGrid DHTMLX Docs

Initializing TreeGrid

dhtmlxTreeGrid can be loaded only from XML or JSON formats

Script initialization of TreeGrid is the same as the one used for Grid. All the user should do is to decide what column should have a tree structure and use a "tree" eXcell for this purpose.

XML

XML structure should be as follows:

<?xml version="1.0" encoding="UTF-8"?>
<rows parent="h0"> 
    <userdata name="gud1"> 
        userdata value 1
    </userdata> 
    <row id="h523" selected="1" call="1" xmlkids="1"> 
        <userdata name="hondaUD"> 
            userdata value for honda
        </userdata> 
        <cell image="folder.gif">Honda</cell> 
        <cell>...</cell> 
        <cell>...</cell> 
    </row>
</rows>

All XML tags and attributes are the same as for dhtmlxGrid. The difference is in the following:

  • <rows> element can have the following attribute in TreeGrid:
    • parent - (for dynamic loading) id of the row that is the parent of the items under current rows;
  • <rows> has the following TreeGrid specific attributes:
    • xmlkids - (for dynamic loading) this row has/doesn't have child rows;
    • open - defines if a row is expanded (for TreeGrid);
    • style - specifies CSS style for the current row;
  • <cell> element also possesses TreeGrid specific parameter:
    • image - optional (default is "leaf.gif") for a tree column; image name to use as a tree node icon.

Related sample:  TreeGrid initialization

JSON

JSON format for TreeGrid:

{
    rows:[
        { id:'1001', 
        data:[
            {"value":"row A","image":"folder.gif"},
            "A Time to Kill",
            "John Grisham",
            "12.99",
            "1",
            "05/01/1998"
        ],
        rows:[
            { id:'sub_1001', 
            data:[
                "subrowA",
                "Blood and Smoke",
                "Stephen King",
                "0",
                "1",
                "01/01/2000"
            ]},
            { id:'sub_1002', 
            data:[
                "subrowB",
                "Blood and Smoke",
                "Stephen King",
                "0",
                "1",
                "01/01/2000"
            ]}
        ]},
        { id:'1002', 
        xmlkids:'1',
        data:[
            "row B",
            "The Green Mile",
            "Stephen King",
            "11.10",
            "1",
            "01/01/1992"] 
         }
    ]
};

Related sample:  TreeGrid initialization from JSON (dhtmlx format)
Related sample:  TreeGrid initialization from JSON (plain format)

Back to top