RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://docs.dhtmlx.com/suite/tree/initialization_of_dhtmlxtree/ below:

JavaScript Tree - Initialization | DHTMLX Suite 9 Docs

Initialization

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

Include source files
Create a container
Initialize Tree with the object constructor
Load data into Tree

<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with DHTMLX Tree</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>
            
            const tree = new dhx.Tree("tree_container",{
                
            });
        </script>
    </body>
</html>

Include source filesâ

Unpack the downloaded package into a folder of your project.

After that, create an HTML file and place full paths to JS and CSS files of DHTMLX Tree into the header of the created file. The Tree component can be used standalone or as a part of the Suite library.

If you use DHTMLX Tree standalone, you need to include 2 files:

tree.js
tree.css

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

If you use DHTMLX Tree as a part of the Suite package, you need to include JS/CSS files of the dhtmlxSuite library:

suite.js
suite.css

<link type="text/css" href="../codebase/suite.css">
<script src="../codebase/suite.js" type="text/javascript"></script>

Create a containerâ

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

index.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. If this argument is not passed to the constructor, the settings will be default.

index.js


const tree = new dhx.Tree("tree_container", {
    checkbox: true
});

Configuration propertiesâ

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

See the detailed information on configuration properties of Tree in the Tree API overview article.

Load data into Treeâ

Detailed information on loading data into Tree is given in the Data loading article.

Exampleâ

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4