Features

This page helps you start working with DHTMLX Sidebar and explore its functionality in depth.

How to start with DHTMLX Sidebar

In this section you will learn how to initialize Sidebar, load data into it, and integrate it into your applications.

Initialization

Topic	Description
Basic initialization	Learn how to initialize Sidebar
Initialization of a collapsed Sidebar	Learn how to initialize Sidebar in the collapsed state (Example)

Loading data into Sidebar

Topic	Description
Loading data into Sidebar	Learn how to load the initial data into Sidebar
Initialization with config.data	The example shows how to load data into Sidebar during initialization
Initialization with data.load()	The example shows how to load data from an external file
Initialization with data.parse()	The example shows how to load data from a local data source
Initialization with external TreeCollection	The example shows how to load data from an external TreeCollection

Sidebar controls

Topic	Description
Custom HTML	Learn how to add an item with custom HTML content to the sidebar (Example)
MenuItem	Learn how to add a MenuItem control to the sidebar
NavItem	Learn how to add a NavItem control to the sidebar (Example)
Separator	Learn how to add a Separator control to the sidebar (Example)
Spacer	Learn how to add a Spacer control to the sidebar (Example)
Title	Learn how to add a Title control to the sidebar

Integration

Topic	Description
Backend integration	Learn how to connect DHTMLX Suite to a backend (Demo)
Optimus	Learn how to use the DHTMLX Optimus framework to build DHTMLX-based apps (the recommended framework for apps with Suite components)
React integration	Learn how to use DHTMLX Sidebar with React (Demo)
Angular integration	Learn how to use DHTMLX Sidebar with Angular (Demo)
Vue integration	Learn how to use DHTMLX Sidebar with Vue.js (Demo)

How to customize Sidebar and change its size

In this section you will learn how to customize Sidebar and configure its size.

Topic	Description
Width of Sidebar	Learn how to set the width of Sidebar
Minimal width of Sidebar	Learn how to set the minimal width of Sidebar in the collapsed state
Adding HTML content into items	The example shows how to add custom elements to Sidebar items
Applying custom icons	Learn how to add custom icons to Sidebar items
Styling Sidebar	Learn how to customize Sidebar (Example)
CSS template A	The example of a CSS template for DHTMLX Sidebar
List of CSS classes	The CSS classes included in the DHTMLX library

How to work with Sidebar

In this section you will learn how to expand and collapse Sidebar, and how to disable, enable, hide, and show Sidebar controls.

How to collapse and expand Sidebar

Topic	Description
Expanding / collapsing Sidebar	Learn how to expand or collapse Sidebar dynamically (Example)
Toggling Sidebar	Learn how to toggle Sidebar (Example)
Is collapsed	Learn how to check whether Sidebar is collapsed

How to work with Sidebar controls

Topic	Description
Disabling / enabling controls	Learn how to disable or enable controls on a page dynamically (Example 1, Example 2)
Is disabled	Learn how to check whether a control is disabled on the page
Hiding / showing controls	Learn how to hide or show controls dynamically (Example)

How to work with data in Sidebar

In this section you will learn how to use the TreeCollection API to work with Sidebar data — add, update, remove, and rearrange controls.

Topic	Description
Adding controls	Learn how to add new controls to Sidebar dynamically (Example)
Updating controls	Learn how to update config options of a Sidebar control (for example, to change the icon of the control) (Example)
Rearranging controls	Learn how to move Sidebar controls to another position
Removing controls	Learn how to remove a control from Sidebar (Example)
TreeCollection API	Check the full TreeCollection API reference

How to work with selection

In this section you will learn how to work with selection.

Topic	Description
Setting selection	Learn how to select a particular Sidebar item (Example)
Is selected	Learn how to check whether a Sidebar item is selected (Example)
Getting selected items	Learn how to get the selected items
Removing selection	Learn how to remove selection from a selected item (Example)

How to work with Sidebar events

In this section you will learn how to work with Sidebar events.

Topic	Description
Event basic rules	Learn the basic rules of event handling
Event handling	Learn how to attach, detach, or call Sidebar events (Example)

API reference

In this section you will find the API reference for Sidebar and its controls.

Sidebar API

Topic	Description
Sidebar methods	Check the list of Sidebar methods
Sidebar events	Check the list of Sidebar events
Sidebar properties	Check the list of Sidebar properties
TreeCollection API	Check the TreeCollection API for working with Sidebar data

Sidebar controls API

Topic	Description
Custom HTML properties	Check the list of properties of the Custom HTML control
MenuItem properties	Check the list of properties of the MenuItem control
NavItem properties	Check the list of properties of the NavItem control
Separator properties	Check the list of properties of the Separator control
Spacer properties	Check the list of properties of the Spacer control
Title properties	Check the list of properties of the Title control

Common functionality

In this section you will learn about common library functionality that is useful when you work with Sidebar.

Topic	Description
Touch support	Learn how to work with touch support
TypeScript support	Learn how to work with TypeScript
Accessibility support	Learn about accessibility support in Sidebar
Custom scroll	Learn how to enable custom scroll in Sidebar
AwaitRedraw	Learn how to run code after the component renders

Any questions left?

info

Do you need more functionality? Feel free to share your suggestions in the comments below!