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 = [
    {
        type: "button",
        icon: "dxi-plus",
        value: "new"
    },
    {
        type: "button",
        icon: "dxi-folder-open",
        value: "open"
    },
    {
        type: "separator"
    },
    {
        type: "button",
        icon: "dxi-printer",
        value: "print"
    },
    {
        type: "spacer"
    },
    {
        type: "input",
        placeholder: "search",
        width: "300",
        label: "search",
        icon: "dxi-magnify",
    },
    {
        type: "separator"
    },
    {
        type: "imageButton",
        src: "/img.png",
        value: "VP",
        count: "99",
    }
];

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:

toolbar.data.parse(data);

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.

toolbar.data.load("[path to this file]/file.json");

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:

toolbar.data.load("/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 = toolbar1.data.serialize();

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
toolbar2.data.parse(state);

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", ...}
]

Button

The button object has the following properties:

  • type - (string) required, the type of a control, set it to "button"
  • id - (string) the id of a control, auto-generated if not set
  • css - (string) adds style classes to a button
  • icon - (string) optional, an icon of the button
  • hotkey - (string) optional, the name of the hot key for the button
  • value - (string) optional, a value of the button
  • tooltip - (string) optional, a tooltip for the button
  • count - (number) optional, a badge with a number
  • items - (array) optional, an array of nested controls
  • group - (string) optional, defines the name of a group of controls a button belongs to. If one of the buttons in the group becomes active, all others automatically become inactive
  • twoState - (boolean) optional, the flag that defines whether a button can be used in two states: active (pressed) and inactive (unpressed)
  • active - (boolean) optional, for twoState buttons, if true, the button is in the active state
  • multiClick - (boolean) optional, defines the behavior of the Undo/Redo buttons:
    • true - all the actions are reverted/re-applied one by one when the Undo/Redo button is clicked and held
    • false - one action is reverted/re-applied on each click of the Undo/Redo button
// button
{
    id:         "add",              
    type:       "button",           
    icon:       "dxi-plus",         
    value:      "Add",              
    count:      11,                                 
    tooltip:    "Add a new user"    
}

Custom HTML Button

The customHTMLButton object has the following properties:

  • type - (string) required, the type of a control, set it to "customButton"
  • id - (string) the id of a control, auto-generated if not set
  • html - (string) optional, a string with HTML that should be inserted into the button
  • twoState - (boolean) optional, adds two states to the button: active (pressed) and inactive (unpressed)
  • active - (boolean) optional, sets the state of a twoState button
  • value - (string) optional, the value of the custom HTML button
  • count - (number) optional, a badge with a number
// custom HTML button
{
    id:"htmlbutton",
    html:"<div style='height:30px; border: 2px solid'>My HTML button</div>"
}

ImageButton

The imageButton object has the following properties:

  • type - (string) required, the type of a control, set it to "imageButton"
  • src - (string) required, the path to the image
  • id - (string) the id of a control, auto-generated if not set
  • twoState - (boolean) optional, adds two states to the button: active (pressed) and inactive (unpressed)
  • active - (boolean) optional, sets the state of a twoState button
// imageButton
{
    id:       "user",               
    type:     "imageButton",        
    src:      "../imgs/avatar.png"              
}

Input

The input object has the following properties:

  • type - (string) required, the type of a control, set it to "input"
  • id - (string) the id of a control, auto-generated if not set
  • icon - (string) optional, the name of an icon from the used icon font
  • placeholder - (string) optional, a tip for the input
  • width - (number) optional, the width of the input field
  • label - (string) optional, a text label for the Input control
  • value - (string) optional, the initial value of the field
// input
{
    id:          "lookup",                    
    type:        "input",                     
    value:       "",                         
    placeholder: "Type in to search...",      
    width:       100,                         
    label:       "Search"
}

SelectButton

The selectButton object has the following properties:

  • type - (string) required, the type of a control, set it to "selectButton"
  • id - (string) the id of a control, auto-generated if not set
  • icon - (string) optional, the name of an icon from the used icon font
  • items - (array) optional, an array of children controls
// selectButton
{
    id:"select",
    type:"selectButton",
    icon:"dxi-some",
    items:[]
}

Separator

The separator object has the following properties:

  • type - (string) required, the type of a control, set it to "separator"
  • id - (string) the id of a control, auto-generated if not set
// separator
{
    id:     "sepId",        
    type:   "separator"     
}

Spacer

The spacer object has the following properties:

  • type - (string) required, the type of a control, set it to "spacer"
  • id - (string) the id of a control, auto-generated if not set
// spacer
{
    id:     "spacerId",     
    type:   "spacer"        
}

Title

The title object has the following properties:

  • type - (string) required, the type of a control, set it to "title"
  • id - (string) the id of a control, auto-generated if not set
  • value - (string) optional, the value of the Title control
// title
{
    id:         "collection",       
    type:       "title",                
    value:      "Music",                
    tooltip:    "Current collection"    
}
Back to top