Skip to main content


To add dhtmlxToolbar into an application, you need to take the following simple steps:

<!DOCTYPE html><html>    <head>        <title>How to Start with dhtmlxToolbar</title>                 <script type="text/javascript" src="../../codebase/suite.js"></script>        <link rel="stylesheet" href="../../codebase/suite.css">    </head>    <body>        <div id="toolbar_container"></div>        <script>            // creating dhtmlxToolbar            var toolbar = new dhx.Toolbar("toolbar_container");        </script>    </body></html>

Related sample: Toolbar. Basic Initialization

Include source files#

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

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

Create a container#

Add a container for the Toolbar and give it an id, e.g. "toolbar_container":

<div id="toolbar_container"></div>

Initialize Toolbar#

Initialize Toolbar with the dhx.Toolbar object constructor. The constructor takes two parameters:

var toolbar = new dhx.Toolbar("toolbar_container", {    // config options});

Configuration properties#

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

Load data into Toolbar#

There are two handy ways of loading data, i.e. a set of controls into Toolbar:

  • from an external file with the help of the load() method of tree collection:
var toolbar = new dhx.Toolbar("toolbar_container");"../common/dataset.json");

Related sample: Toolbar. Init With External Data

  • from a local source using the parse() method of tree collection:
var data = [    {        type: "button",        icon: "dxi-plus",        value: "new"    },    {        type: "button",        icon: "dxi-folder-open",        value: "open"    },    {        type: "button",        icon: "dxi-vault",        value: "save"    },    {        type: "button",        icon: "dxi-delete",        value: "delete"    }];
var toolbar = new dhx.Toolbar("toolbar_container", {css:"dhx_toolbar--bordered" });;

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