This is a tutorial that will walk you through creating a basic application containing Tree. You will learn how to initialize Tree customize it and populate with data.
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>
On the next step, you should create a div container where you then place your tree.
<div id="box" style="width:400px;height:200px;"></div>
After you have prepared the site for the tree you can move to its initialization.
To create a new Tree object you need to use the next constructor:
Tree constructor
tree = new webix.ui({ view:"tree" })
The only mandatory parameter you should specify inside the constructor:
Basic Tree configuration
tree = new webix.ui({
container:"box",
view:"tree",
});
On the previous step, we have defined primary configuration for Tree. For more available settings, read other articles in this documentation, such as:
There are different ways to load data into Tree (read about them in chapter Loading data ).
We will use the easiest of the ways and specify data directly in the constuctor with the help of the
data property:
Loading data into the tree
tree = new webix.ui({
container:"testA",
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
What can we suggest you to do next?