Loading Data into Tree

Webix Tree can get data in the following data formats:

• JSON (default)
• XML.

Details and examples of data formats in tree-like structures

There are two main ways you can specify the data source for Tree:

• define the data set in the object initialization
• use either the parse or the load method.

The difference between the methods:

• parse is used for the client data (data available in a browser)
• load is used to load remote data (from a server)

Loading from Inline Dataset

If you want to specify the data set directly on the page, you can use:

• property data
• method parse

Specifying data inline

var treedata = [
    { id: "1", value: "Book 1", data: [
        { id: "1.1", value: "Part 1" },
        { id: "1.2", value: "Part 2" }
    ]},
    { id: "2", value: "Book 2", data: [
        { id: "2.1", value: "Part 1" }
    ]}
];
 
var tree = webix.ui({
    view: "tree",
    data: treedata
});
 
//or
tree.parse(treedata)

Related sample:  Tree: JSON Dataset

Loading from a Data File

To load data from a file on the server, you can use:

• property url
• method load

Remember to set the datatype as 'xml' if you load XML data:

var tree = webix.ui({
    view: "tree",
    ...
    url: "data/data.xml",
    datatype: "xml"
});
//or
tree.load('data/data.xml', 'xml');

Related sample:  Tree: JSON Dataset

Loading Linear Data

You can load plain data into the tree. The tree structure is achieved by means of grouping. Grouping is specified through the $group key of the scheme parameter.

var tree = webix.ui({
    view: "tree",
    scheme: {
        $group: "#make#",
    },
    data: [
        { id: 1, value: "Avalon", make: "Toyota" },
        { id: 2, value: "Corolla", make: "Toyota" },
        { id: 3, value: "Camry", make: "Toyota" },
        { id: 4, value: "Octavia", make: "Skoda" },
        { id: 5, value: "Superb", make: "Skoda" }
    ]
});

Related sample:  Tree: Plain JSON Data with Client-side Grouping

Loading From a Database

To load data from a database on the server you should deal with both client and server sides.

On the client side

You should either define the url property or call the load method that would point to a server REST API endpoint.

Static loading from a server database. Client-side code.

var tree = webix.ui({
    url: "data/tree_data.php"
});
//or
tree.load("data/tree_data.php");

You can provide a custom server-side code for Tree.

Related sample:  Dynamic Loading

Back to top