Skip to main content

Initialization

info

Download the DHTMLX Toolbar package as a part of the DHTMLX Suite library

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

<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with DHTMLX Toolbar</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 DHTMLX Toolbar
            const toolbar = new dhx.Toolbar("toolbar_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 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:

const 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​

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

Example​