Initializing TreeView

TreeView's source files

To begin working with a TreeView component you need to include treeview js/css files on the page. There are two of them:

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

In case you're working with the whole DHTMLX Suite, there's no need to include extra files - dhtmlx js/css files will be enough:

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

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js" 
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js" 
    type="text/javascript"></script>

Constructor

var myTreeView = new dhtmlXTreeView({
    parent:         "treeviewObj",  // id/object, container for treeview
    skin:           "dhx_terrace",  // string, optional, treeview's skin
    iconset:        "font_awesome", // string, optional, sets the font-awesome icons
    multiselect:    true,           // boolean, optional, enables multiselect
    checkboxes:     true,           // boolean, optional, enables checkboxes
    dnd:            true,           // boolean, optional, enables drag-and-drop
    context_menu:   true,           // boolean, optional, enables context menu
    json:           "filename.json",// string, optional, json file with struct
    xml:            "filename.xml", // string, optional, xml file with struct
    items:          [],             // array, optional, array with tree struct
    onload:         function(){}    // callable, optional, callback for load
});

The order of loading (if several initial params specified at a time) is: json, xml, items.

Minimal initialization

To initialize TreeView in an HTML element, you need to complete two steps:

1) define a parent container, where treeview will be placed:

<body>
    <div id="treeviewObj">
        <!-- treeview body will be here later -->
    </div>
</body>

2) create a TreeView object and place it into the HTML object that you've just created:

var myTreeView = new dhtmlXTreeView({
    parent:"treeviewObj",
    items: [
        {id: 1, text: "Books", open: 1, items: [
            {id: 2, text: "Turned at Dark / C. C. Hunter"},
            {id: 3, text: "Daire Meets Ever / Alyson Noël"},
            {id: 4, text: "Socs and Greasers / Rob Lowe"},
            {id: 5, text: "Privacy and Terms.pdf"},
            {id: 6, text: "Licence Agreement.pdf"}
        ]}
    ]
});

Related sample: Object API init

Attaching to a cell

Pay attention that if you attach treeview to a cell, the "parent" attribute should be omitted.

1) Attaching to the layout's cell

myLayout.cells(id).attachTreeView({
    // treeview config here
});

Related sample: Integration with layout

2) Attaching to the tabbar's tab

myTabbar.tabs(id).attachTreeView({
    // treeview config here
})

Related sample: Integration with tabbar

3) Attaching to the accordion's cell

myAccordion.cells(id).attachTreeView({
    // treeview config here
});

4) Attaching to the window

myWins.window(id).attachTreeView({
    // treeview config here
});

Related sample: Integration with window

5) Attaching to the carousel's cell

myCarousel.cells(id).attachTreeView({
    // treeview config here
});

6) Attaching to the popup

myPopup.attachTreeView({
    // treeview config here
});

Related sample: Integration with popup

7) Attaching to the sidebar's cell

mySidebar.cells(id).attachTreeView({
    // treeview config here
});