Skip to main content

Features

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

How to start with DHTMLX Toolbar

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

Initialization

TopicDescription
Basic initializationLearn how to initialize a Toolbar

Loading data into Toolbar

TopicDescription
Loading data into ToolbarRead how to load the initial data into Toolbar
Initialization with config.dataThe example shows how to load data into Toolbar 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

Toolbar controls

TopicDescription
ButtonLearn how to add a Button control into a Toolbar (Example)
Custom HTMLLearn how to add an item with custom HTML content into a Toolbar (Example)
DatepickerLearn how to add a Datepicker control into a Toolbar (Example)
Image buttonLearn how to add an ImageButton control into a Toolbar (Example)
InputLearn how to add an Input control into a Toolbar (Example)
MenuItemLearn how to add a MenuItem control into a Toolbar
NavItemLearn how to add a NavItem control into a Toolbar (Example)
Select buttonLearn how to add a SelectButton control into a Toolbar (Example)
SeparatorLearn how to add a Separator control into a Toolbar (Example)
SpacerLearn how to add a Spacer control into a Toolbar (Example)
TitleLearn how to add a Title control into a Toolbar (Example)

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 Toolbar with React (Demo)
Angular integrationLearn how to use DHTMLX Toolbar with Angular (Demo)
Vue integrationLearn how to use DHTMLX Toolbar with Vue.js (Demo)

How to configure Toolbar controls

In this section you will find the examples of controls' configuration.

TopicDescription
Group buttonsThe example shows how to group controls
BadgesThe example shows how to add a badge with a number to the control
TooltipsThe example shows how to add a tooltip for the control
Two stateLearn how to create a navItem with active and inactive states (Example)
MulticlickThe example shows how to configure behavior of the Undo/Redo buttons

How to customize Toolbar

In this section you can learn how to customize a Toolbar.

TopicDescription
Adding HTML content into itemsLearn how to add a custom image into the toolbar item (Example)
Applying custom iconsLearn how to add custom icons to Toolbar items (Example)
Styling ToolbarLearn how to customize Toolbar (Example)
CSS template AThe example of a CSS template for DHTMLX Toolbar
List of CSS classesA set of CSS classes provided by the DHTMLX library

How to work with Toolbar controls

In this section you may study how to disable and enable, hide and show Toolbar controls, and more.

TopicDescription
Disabling / enabling controlsLearn how to disable or enable controls on a page dynamically (Example)
Is disabledLearn how to check whether a control is disabled on the page
Hiding / showing controlsLearn how to hide or show controls dynamically (Example)
Setting values/states of controlsLearn how to change the value or state of a control (Example)
Getting values/states of controlsLearn how to get the current value or state of a control (Example)
Setting focus on an Input controlLearn how to set focus on an input of Toolbar

How to work with data in Toolbar

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

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

How to work with selection

In this section you may study how to work with selection functionality.

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

How to work with Toolbar events

This section explains how to work with Toolbar events.

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

API reference

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

Toolbar API

TopicDescription
Toolbar methodsCheck the list of Toolbar methods
Toolbar eventsCheck the list of Toolbar events
Toolbar propertiesCheck the list of Toolbar properties
TreeCollection APICheck the API of TreeCollection to work with Toolbar data

Toolbar controls API

TopicDescription
Button propertiesCheck the list of properties of the Button control
Custom HTML propertiesCheck the list of properties of the Custom HTML control
Datepicker propertiesCheck the list of properties of the Datepicker control
ImageButton propertiesCheck the list of properties of the ImageButton control
Input propertiesCheck the list of properties of the Input control
MenuItem propertiesCheck the list of properties of the MenuItem control
NavItem propertiesCheck the list of properties of the NavItem control
SelectButton propertiesCheck the list of properties of the SelectButton 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 Toolbar.

TopicDescription
Touch supportLearn how to work with touch support (Example)
TypeScript supportLearn how to work with TypeScript
Custom scrollLearn how to enable custom scroll in Toolbar
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!