This tutorial will walk you through creating a basic application containing Tree. You will learn how to initialize a Tree, populate it with data and set the desired configuration.
The final code of the tutorial can be used as the start point while creating applications using Tree.
Related sample: Quick start with DataTree
To start, create a new HTML file and include the related Webix code files in it.
Required code files are:
A basic html page with the included code files
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Quick start with Tree</title>
<script src="../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../codebase/webix.css" type="text/css"
charset="utf-8">
</head>
<body>
<script> //here you will place your JavaScript code
</script>
</body>
</html>
After you have included the necessary files, you can move to Tree initialization.
To create a new Tree object you need to use the next constructor:
Tree constructor
webix.ui({
view:"tree"
});
In fact, it's enough to initialize a Tree. However, it's also possible to put a tree inside of an HTML container.
To set a tree in a particular position of a page, you can put it in a container. For that, you should create a div container. Let's create a container with the "box" id:
<div id="box" style="width:400px;height:200px;"></div>
After that you need to use the above mentioned Tree constructor and specify the created container via the corresponding property:
Basic Tree configuration
webix.ui({
container:"box",
view:"tree"
});
There are different ways to load data into Tree (read about them in chapter Loading Data into Tree ).
We will use the easiest of the ways and specify data directly in the constructor with the help of the data property:
Loading data into the tree
webix.ui({
// container:"box",
view:"tree",
data: [
{id:"root", value:"Cars", open:true, data:[
{ id:"1", open:true, value:"Toyota", data:[
{ id:"1.1", value:"Avalon" },
{ id:"1.2", value:"Corolla" },
{ id:"1.3", value:"Camry" }
]},
{ id:"2", open:true, value:"Skoda", data:[
{ id:"2.1", value:"Octavia" },
{ id:"2.2", value:"Superb" }
]}
]}
]
});
Congratulations! Now you can run your app and it'll produce Tree shown at the very beginning.
Related sample: Quick start with DataTree
On the previous steps, we have defined a primary configuration for Tree. For more available settings, read other articles in this documentation, such as:
What can we suggest you to do next?