JavaScript array containing data for the component

string|array|object data;


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" }
    view:"tree", data:data

Related samples


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
See also
Back to top
If you have not checked yet, be sure to visit site of our main product Webix javascript ui library and page of tree ui product.