Work with Sidebar

Expand and collapse Sidebar

The expand() and collapse() methods expand and collapse a sidebar:

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

Related sample: Sidebar. Collapse/expand

Toggle Sidebar

The toggle() method collapses an expanded sidebar and expands a collapsed one:

sidebar.toggle();

Related sample: Sidebar. Toggle

Check if Sidebar is collapsed

The isCollapsed() method checks whether a sidebar is collapsed. The method returns true if the sidebar is collapsed and false if it is expanded:

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

Show and hide controls

The show() and hide() methods show and hide controls by their IDs:

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

Related sample: Sidebar. Show/hide

Starting from v7.0, you can call the methods without parameters to hide or show all Sidebar controls at once:

// hides all Sidebar controls
sidebar.hide();
// shows all Sidebar controls
sidebar.show();

Enable and disable controls

The enable() and disable() methods enable and disable controls by their IDs:

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

Related sample: Sidebar. Enable/disable

Starting from v7.0, you can call the methods without parameters to disable or enable all Sidebar controls at once:

// disables all Sidebar controls
sidebar.disable();
// enables all Sidebar controls
sidebar.enable();

Check if a Sidebar item is disabled

The isDisabled() method checks whether a Sidebar item is disabled. The method takes one parameter:

id	(string | number) the ID of a Sidebar item

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

Related sample: Sidebar. Enable/disable

Select and unselect an item

Select a Sidebar item

The select() method of Sidebar selects a particular item. The method takes two parameters:

id	(string | number) the ID of an item
unselect	(boolean) optional, true to unselect previously selected items, otherwise false (default: true)

sidebar.select("categoryPost");

Related sample: Sidebar. Select / unselect

Unselect a Sidebar item

The unselect() method of Sidebar removes selection from a selected item. The method takes the ID of an item as an optional parameter:

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

Call the method without parameters to remove selection from all selected Sidebar items:

// unselects all previously selected items
sidebar.unselect();

Related sample: Sidebar. Select / unselect

Check if a Sidebar item is selected

The isSelected() method checks whether a Sidebar item is selected. The method takes one parameter:

id	(string | number) the ID of a Sidebar item

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

Related sample: Sidebar. Select / unselect

Get selected items

The getSelected() method returns an array with the IDs of selected items:

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

Use the TreeCollection API

You can manipulate Sidebar controls with the TreeCollection API.

Add new controls to Sidebar

Use the add() method of TreeCollection to add controls to an initialized sidebar. The method 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

Check the JSON format templates for Sidebar controls.

Update the configuration of controls

The update() method of TreeCollection changes the configuration options of a control. The method takes two parameters:

id	the ID of a control
config	an object with the 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

Remove controls from Sidebar

The remove() method of TreeCollection removes a control. Pass the ID of the control to the method:

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

Related sample: Sidebar. Data remove

Rearrange controls

Use the move() method of TreeCollection to move Sidebar controls to different positions. For example, the following code moves the item with the "2" ID to the top of the sidebar:

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

note

Check the full TreeCollection API reference.