Initialization

To initialize dhtmlxTree on a page, you need to take the following simple steps:

<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with dhtmlxTree</title>         
        <script type="text/javascript" src="../../codebase/tree.js"></script>
        <link rel="stylesheet" href="../../codebase/tree.css">
    </head>
    <body>
        <div id="tree_container"></div>
        <script>
            // creating dhtmlxTree
            var tree = new dhx.Tree("tree_container",{
                // config options
            });
</script> </body> </html>

Include source files

Create an HTML file and place full paths to CSS and JS files of dhtmlxTree into the header of the created HTML file. The files are:

  • tree.js
  • tree.css
<script type="text/javascript" src="../../codebase/tree.js"></script>
<link rel="stylesheet" href="../../codebase/tree.css">

Create a container

Add a container for Tree and give it an id, for example "tree_container":

tree.html

<div id="tree_container"></div>

Initialize Tree

Initialize Tree with the dhx.Tree object constructor. The constructor has two parameters:

  • the HTML container for Tree,
  • optional, an object with configuration properties (see the full list below). If this argument is not passed to the constructor, the settings will be default.

tree.html

// creating dhtmlxTree
var tree = new dhx.Tree("tree_container", {
    checkbox: true
});

There is a set of properties you can specify for Tree to optimize its configuration for your needs. Read the details below.

Configuration properties

You can specify the following properties in the configuration object of List:

  • data - (array) sets a data set for a tree
  • events - (object) the event bus
  • autoload - (boolean) defines that the structure of a tree is being built while opening items
  • checkbox - (boolean) adds checkboxes to tree items
  • dragBehaviour - (string) defines the behaviour of a dragged item
  • dragCopy - (boolean) defines that an item is copied to a target during drag-n-drop
  • dragMode - (string) enables drag-n-drop in Tree
  • isFolder - (function) defines whether an item should be rendered as a folder
  • keyNavigation - (boolean) enables key navigation in a tree

Load data into Tree

Finally, you are to load the tree with data. You can load inline or external data into the tree.

  • to load data from a local source, use the parse() method of the Tree Collection object:
var tree = new dhx.Tree("tree_container",{
     // config options
});
 
tree.data.parse(data);
  • to load data from an external file, use the load() method of the Tree Collection object:
var tree = new dhx.Tree("tree_container",{
    // config options
});
 
tree.data.load("../common/dataset.json");
Back to top