Skip to main content

Features

This page contains structured information that will help you to start working with DHTMLX Sidebar and go into deep dive on its functionality.

How to start with DHTMLX Sidebar​

In this section you can find out how to initialize Sidebar, how to load data into the component and how to integrate Sidebar into your applications.

Initialization​

TopicDescription
Basic initializationLearn how to initialize a Sidebar
Initialization of a collapsed SidebarLearn how to initialize a Sidebar in the collapsed state (Example)

Loading data into Sidebar​

TopicDescription
Loading data into SidebarRead how to load the initial data into Sidebar
Initialization with config.dataThe example shows how to load data into Sidebar on the initialization stage
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 TreeCollectionThe example shows how to load data from external TreeCollection
TopicDescription
Custom HTMLLearn how to add an item with custom HTML content into the sidebar (Example)
MenuItemLearn how to add a MenuItem control into the sidebar
NavItemLearn how to add a NavItem control into the sidebar (Example)
SeparatorLearn how to add a Separator control into the sidebar (Example)
SpacerLearn how to add a Spacer control into the sidebar (Example)
TitleLearn how to add a Title control into the sidebar

Integration​

TopicDescription
Backend integrationLearn how to connect DHTMLX Suite to a backend (Demo)
OptimusLearn how to use DHTMLX Optimus framework for creating DHTMLX-based app
(recommended framework for creating apps with Suite components)
React integrationLearn how to use DHTMLX Sidebar with React (Demo)
Angular integrationLearn how to use DHTMLX Sidebar with Angular (Demo)
Vue integrationLearn how to use DHTMLX Sidebar with Vue.js (Demo)

How to customize Sidebar and change its size​

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

TopicDescription
Width of SidebarLearn how to set the necessary width of Sidebar
Minimal width of SidebarLearn how to set the minimal width of Sidebar in the collapsed state
Adding HTML content into itemsThe example shows how to add custom element into the Sidebar items
Applying custom iconsLearn how to add custom icons to Sidebar items
Styling SidebarLearn how to customize a Sidebar (Example)
CSS template AThe example of a CSS template for DHTMLX Sidebar
List of CSS classesA set of CSS classes provided by the DHTMLX library

How to work with Sidebar​

In this section you may study how to expand or collapse a Sidebar, how to disable and enable, hide and show Sidebar controls.

How to collapse and expand Sidebar​

TopicDescription
Expanding / collapsing SidebarLearn how to expand or collapse a Sidebar dynamically (Example)
Toggling SidebarLearn how to toggle a Sidebar (Example)
Is collapsedLearn how to check whether a Sidebar is collapsed

How to work with Sidebar controls​

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

How to work with data in Sidebar​

This section will tell you how to use TreeCollection API for working with data of Sidebar, i.e. add, update, remove, rearrange controls, etc.

TopicDescription
Adding controlsLearn how to add new controls into Sidebar dynamically (Example)
Updating controlsLearn how to update config options of a Sidebar control (for example, to change the icon of the control) (Example)
Rearranging controlsLearn how to move Sidebar controls to another position
Removing controlsLearn how to remove a control from Sidebar (Example)
TreeCollection APICheck the list of all available TreeCollection API

How to work with selection​

In this section you can learn how to work with selection functionality.

TopicDescription
Setting selectionLearn how to select a particular Sidebar item (Example)
Is selectedLearn how to check whether a Sidebar item is selected (Example)
Getting selected itemsLearn how to get the selected items
Removing selectionLearn how to remove selection from a selected item (Example)

How to work with Sidebar events​

This section explains how to work with Sidebar events.

TopicDescription
Event basic rulesLearn basic rules on how to work with events
Event handlingLearn how to attach, detach, or call the Sidebar events (Example)

API reference​

In this section you can find out corresponding references of Sidebar and its controls API.

TopicDescription
Sidebar methodsCheck the list of Sidebar methods
Sidebar eventsCheck the list of Sidebar events
Sidebar propertiesCheck the list of Sidebar properties
TreeCollection APICheck the API of TreeCollection to work with Sidebar data
TopicDescription
Custom HTML propertiesCheck the list of properties of the Custom HTML control
MenuItem propertiesCheck the list of properties of the MenuItem control
NavItem propertiesCheck the list of properties of the NavItem control
Separator propertiesCheck the list of properties of the Separator control
Spacer propertiesCheck the list of properties of the Spacer control
Title propertiesCheck the list of properties of the Title control

Common functionality​

In this section you will learn about common functionality of the library which can be useful while working with Sidebar.

TopicDescription
Touch supportLearn how to work with touch support
TypeScript supportLearn how to work with TypeScript
Custom scrollLearn how to enable custom scroll in Sidebar
AwaitRedrawLearn how to perform the code after the component’s rendering

Any questions left?​


info

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