Skip to main content

Work with Sidebar

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 sidebar initialization:

{    type: "menuItem",    value: "test1",    tooltip: "tooltip for test1"}

Hiding and showing controls#

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

sidebar.hide(id); // hides a controlsidebar.show(id); // shows a control

Related sample: Sidebar. Show/Hide

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

// hides all Sidebar controlssidebar.hide();// shows all Sidebar controlssidebar.show();

Expanding and collapsing Sidebar#

It is possible to expand/collapse a sidebar using two corresponding methods - expand() and collapse():

sidebar.expand(); // expands a sidebarsidebar.collapse(); // collapses a sidebar

Related sample: Sidebar. Collapse/Expand

Checking if Sidebar is collapsed#

To check whether Sidebar is collapsed, make use of the isCollapsed() method of the Sidebar API. The method returns true, if a sidebar is collapsed, and false if it's expanded.

sidebar.isCollapsed(); // -> true/false

Disabling and enabling controls#

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

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

Related sample: Sidebar. Enable/Disable

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

// disables all Sidebar controlssidebar.disable();// enables all Sidebar controlssidebar.enable();

Checking if a sidebar item is disabled#

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

id(string, number) an id of a sidebar item
sidebar.isDisabled("1"); // -> true/false

Related sample: Sidebar. Enable/Disable

Selecting/Unselecting an item#

Selecting a sidebar item#

To select a particular Sidebar item, make use of the select() method of Sidebar. 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
sidebar.select("categoryPost");

Related sample: Sidebar. Select/Unselect

Unselecting a sidebar item#

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

// unselects a specified selected itemsidebar.unselect("categoryPost");

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

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

Related sample: Sidebar. Select/Unselect

Checking if a sidebar item is selected#

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

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

sidebar.isSelected("categoryPost"); // -> returns true/false

Related sample: Sidebar. Select/Unselect

Getting selected items#

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

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

Toggling Sidebar#

You can collapse and expand a sidebar with the help of the toggle() method as easy as that:

sidebar.toggle();

Related sample: Sidebar. Toggle

Using Tree collection API#

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

Adding new controls into Sidebar#

It is possible to add more controls into the initialized Sidebar 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)

sidebar.data.add({    type:"navItem", value:"Music"});sidebar.data.add({    type:"separator"});sidebar.data.add({    type:"menuItem", value:"Photos"});

Related sample: Sidebar. Data Add

Templates for Sidebar 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:

sidebar.data.update("add", {     icon: "icon_name" });

Related sample: Sidebar. Data Update

Removing controls from Sidebar#

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:

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

Related sample: Sidebar. Data 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 sidebar:

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

Check the full list of Tree collection API.