Work with Toolbar

Setting/getting values and states

You can change the value or state (for a TwoState button) of a control with the help of the setState() method. It takes one parameter: a key-value pair with the ID of the control and its new value (state).

Here is how you can use it to change the state of a TwoState button:

{type:"button", twoState:true, id:"check"}

And this is how you can change the value of an input:

{type:"input", id:"name", value:""}

To get the current value of the control, use the getState() method.

This is what the method returns for a TwoState button:

{type:"button", twoState:true, id:"check"}
// { "check":true }
// or
// { "check":false }

And this is a possible return value for an input:

{type:"input", id:"name", value:"Maintenance"}

Hiding and showing controls

You can show or hide controls by their IDs. Pass them to the corresponding methods - show() and hide():

toolbar.hide(id); // hides a control; // shows a control

Disabling and enabling controls

You can disable or enable controls. The related methods - enable() and disable() - take the IDs of controls as parameters:

toolbar.disable(id); // disables a control
toolbar.enable(id);  // enables a control

Checking if a Toolbar item is disabled

To check if an item of Toolbar is disabled, call the isDisabled() method. The method takes one parameter:

  • id - (string) an id of a menu item
menu.isDisabled("1"); // -> true/false

Related sample:  Enable/disable - DHTMLX Toolbar

Adding a tooltip to a control

You can attach a tooltip to a control. For this you need to provide the tooltip property with the tooltip text in the control object before the toolbar initialization:

    type: "text",
    value: "test1",
    tooltip: "tooltip for test1"

Using Tree collection API

You can manipulate the controls of Toolbar with the help of the Tree collection API.

Adding new controls into Toolbar

It is possible to add more controls into the initialized Toolbar on the fly. Use the add() method of Tree Collection. It takes three parameters:

  • config - (object) the configuration object of the added control
  • index - (number) optional, the position to add a control at
  • parent - (string) optional, the id of a parent control (for the menuItem control type){
    type:"button", value:"Add"
    type:"button", value:"Remove"

Related sample:  Add - DHTMLX Toolbar

Templates for Toolbar controls in the JSON format are given here.

Updating config of controls

You can change config options of the control via the update() method of Tree Collection. It takes two parameters:

  • id - the id of the control
  • config - an object with new configuration of the control

For example, you can change the icon of a control:"edit", { 
    icon: "mdi mdi-pencil" 

Related sample:  Update - DHTMLX Toolbar

Removing controls from Toolbar

To remove a control, make use of the remove() method of Tree Collection. Pass the id of the control that should be removed to the method:"control-id");

Related sample:  Remove - DHTMLX Toolbar

Rearranging controls

You can move menu controls to different positions with the move() method of Tree Collection. For example, this is how you can move an item with ID "2" to the left edge of the toolbar:"2",0);

Check the full list of Tree collection API.

Back to top