Data Loading

There are several simple ways of loading data into dhtmlxToolbar:

  • load data from an external file
  • load data from a local data source

First, you need to prepare a data set that will be loaded into Toolbar.

Preparing data set

dhtmlxToolbar expects loaded data in the JSON format. Here is an example of an appropriate data set:

var data = [
        "id": "other",
        "type": "button",
        "view": "link",
        "circle": true,
        "color": "secondary",
        "icon": "mdi mdi-menu"
        "id": "add",
        "icon": "mdi mdi-plus",
        "value": "Add"
        "type": "separator"
        "id": "edit",
        "value": "Edit"
        "id": "search",
        "type": "input",
        "placeholder": "Search",
        "icon": "mdi mdi-magnify"

A data set consists of objects with configurations of toolbar controls. Templates for Toolbar controls in JSON format are given below.

Loading from a local source

You can load data to a toolbar from an array with the parse() method of TreeCollection. Pass a predefined data set as a parameter of this method:;

Related sample:  Toolbar. Basic Initialization

Loading from an external file

The load method loads the toolbar data from an external JSON file. All the data are loaded at once. The parameter of the method is the path to the JSON file."[path to this file]/file.json");

Related sample:  Toolbar. Basic Initialization

The component will make an AJAX call and expect the remote URL to provide valid JSON data.

Data loading is asynchronous, so you need to wrap any after-loading code into a promise:"/some/data").then(function(){
   // some logic here

Saving and restoring state

To save the current state of a toolbar, use the serialize() method of Tree Collection. It converts the data of a toolbar into an array of JSON objects. Each JSON object contains the configuration of a separate Toolbar control.

var state =;

Then you can parse the data stored in the saved state array to a different toolbar. For example:

// creating a new toolbar
var toolbar2 = new dhx.Toolbar(document.body);
// parsing the state of toolbar1 into toolbar2;

JSON format templates

This section will give you the idea of JSON format templates for separate Toolbar controls.

Common template

// common
    {id: "item_a", type: "button", ...},
    {id: "item_b", type: "input", ...},
    {id: "item_c", type: "text", ...}


The button object has the following properties:

// button
    id: "add",              
    type: "button",         
    icon: "dxi-plus",           
    value: "Add",               
    count: 11,                                  
    tooltip: "Add a new user"   

Custom HTML

The customHTML object has the following properties:

// custom HTML button
    type: "customHTML",
    html: "<img src='../logo.svg' alt=''/>",
    css: "logo-container"


The imageButton object has the following properties:

// imageButton
    id:       "user",               
    type:     "imageButton",        
    src:      "../img/avatar.png"               


The input object has the following properties:

// input
    id:          "lookup",                    
    type:        "input",                     
    value:       "",                         
    placeholder: "Type in to search...",      
    width:       100,                         
    label:       "Search"


The menuItem object has the following properties:

// menuItem
    icon:"dxi dxi-check",


The navItem object has the following properties:

// navItem
    type:"navItem", value:"Some",
    icon:"dxi dxi-check"


The selectButton object has the following properties:

// selectButton


The separator object has the following properties:

// separator
    id:     "sepId",        
    type:   "separator"     


The spacer object has the following properties:

// spacer
    id:     "spacerId",     
    type:   "spacer"        


The title object has the following properties:

// title
    id:         "collection",       
    type:       "title",                
    value:      "Music",                
    tooltip:    "Current collection"    
Back to top