data

JavaScript array containing data for the component

string|array|object data;

Example

var data = [
    { id:"1", open:true, value:"The Shawshank Redemption", data:[
        { id:"1.1", value:"Part 1" },
        { id:"1.2", value:"Part 2" },
        { id:"1.3", value:"Part 3" }
    ]},
    { id:"2", value:"The Godfather", open:true, data:[
        { id:"2.1", value:"Part 1", disabled:true },
        { id:"2.2", value:"Part 2" }
    ]}
];
 
webix.ui({
    view:"tree", data:data
});

Related samples

Tree: JSON Dataset

Details

The data property serves only as an initial data source. After the data has been parsed, it will be kept in the inner storage for loaded data.

The source array will be modified during data parsing. To reuse the original data array, make a copy of it and continue with the copied array.

Each data item of Tree can have the following properties:

id (string,number) - the ID of the data item
value (string) - the name of the item that will be displayed next to the corresponding node
data (array) - nested data items of this node
open (boolean) - defines whether the node will be initially opened or closed (only for parent nodes, false by default)
disabled (boolean) - defines whether the node will be initially enabled or disabled (false by default)
checked (boolean) - defines whether the checkbox for the corresponding item will be initially checked or not (used with node templates with checkboxes).

All these properties can be set and changed.

Each data item will be supplied with the following readonly properties to form the hierarchy:

$level - (number) the level of nesting (one-based numbering)
$parent - (string) the id of the item parent
$count - (number) the number of children