Skip to main content

Work with Toolbar

Setting/getting values and states#

Setting values/states#

You can change the value or state (for a TwoState navItem) 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 navItem:

{type:"navItem", twoState:true, id:"check"}...toolbar.setState({"check":true});//ortoolbar.setState({"check":false});

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

{type:"input", id:"name", value:""}...toolbar.setState({"name":"Maintenance"});

Related sample: Toolbar. Set State

Getting values/states#

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

Starting from v7.0, the method can take the id of a Toolbar control as a parameter and return the value/state of the control. If id is not specified, the method returns an object with IDs of controls and their values/states.

This is what the method returns for a TwoState navItem:

{type:"navItem", twoState:true, id:"check"}...toolbar.getState("check"); // -> true/false// ortoolbar.getState(); // -> { "check":true } or { "check":false }

And this is a possible return value for an input:

{type:"input", id:"name", value:"Maintenance"}...toolbar.getState("name"); // -> "Maintenance"// ortoolbar.getState(); // -> {"name":"Maintenance"}

Related sample: Toolbar. Get State

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 controltoolbar.show(id); // shows a control

Related sample: Toolbar. Hide/Show

Starting from v7.0, it is possible to hide/show all Toolbar controls on the page at once by using the methods without parameters:

// hides all Toolbar controlstoolbar.hide();// shows all Toolbar controlstoolbar.show();

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 controltoolbar.enable(id);  // enables a control

Related sample: Toolbar. Enable/Disable

Starting from v7.0, it is possible to disable/enable all Toolbar controls on the page at once by using the methods without parameters:

// disables all Toolbar controlstoolbar.disable();// enables all Toolbar controlstoolbar.enable();

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, number) an id of a toolbar item

menu.isDisabled("1"); // -> true/false

Related sample: Toolbar. Enable/Disable

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"}

Selecting/Unselecting an item#

Selecting a toolbar item#

To select a particular Toolbar item, make use of the select() method of Toolbar. The method takes two parameters:

id(string, number) the id of an item
unselect(boolean) optional, true - to unselect previously selected items, otherwise - false; true by default
toolbar.select("web");

Related sample: Toolbar. Select/Unselect

Unselecting a toolbar item#

To remove selection from a selected item, apply the unselect() method of Toolbar. The method may take the id of an item as a parameter:

// unselects a specified selected itemtoolbar.unselect("web");

It is also possible to remove selection from all previously selected items of Toolbar via the unselect() method:

// unselects all previously selected itemstoolbar.unselect();

Related sample: Toolbar. Select/Unselect

Checking if a toolbar item is selected#

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

id(string, number) an id of a toolbar item

toolbar.isSelected("web"); // -> returns true/false

Related sample: Toolbar. Select/Unselect

Getting selected items#

To get the selected items, call the getSelected() method. The method returns an array of IDs of selected items:

toolbar.getSelected(); // -> ["selected_1", "selected_1.1"]

Related sample: Toolbar. Tooltips

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)

toolbar.data.add({    type:"button", value:"Add"});toolbar.data.add({    type:"separator"});toolbar.data.add({    type:"button", value:"Remove"});

Related sample: Toolbar. Add

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:

idthe id of the control
configan object with new configuration of the control

For example, you can change the icon of a control:

toolbar.data.update("edit", {     icon: "mdi mdi-pencil" });

Related sample: Toolbar. Update

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:

toolbar.data.remove("control-id");

Related sample: Toolbar. Remove

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:

toolbar.data.move("2",0);
note

Check the full list of Tree collection API.