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
| Topic | Description |
|---|---|
| Basic initialization | Learn how to initialize a Toolbar |
Loading data into Toolbar
| Topic | Description |
|---|---|
| Loading data into Toolbar | Read how to load the initial data into Toolbar |
| Initialization with config.data | The 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 TreeCollection | The example shows how to load data from external TreeCollection |
Toolbar controls
| Topic | Description |
|---|---|
| Button | Learn how to add a Button control into a Toolbar (Example) |
| Custom HTML | Learn how to add an item with custom HTML content into a Toolbar (Example) |
| Datepicker | Learn how to add a Datepicker control into a Toolbar (Example) |
| Image button | Learn how to add an ImageButton control into a Toolbar (Example) |
| Input | Learn how to add an Input control into a Toolbar (Example) |
| MenuItem | Learn how to add a MenuItem control into a Toolbar |
| NavItem | Learn how to add a NavItem control into a Toolbar (Example) |
| Select button | Learn how to add a SelectButton control into a Toolbar (Example) |
| Separator | Learn how to add a Separator control into a Toolbar (Example) |
| Spacer | Learn how to add a Spacer control into a Toolbar (Example) |
| Title | Learn how to add a Title control into a Toolbar (Example) |
Integration
| Topic | Description |
|---|---|
| Backend integration | Learn how to connect DHTMLX Suite to a backend (Demo) |
| Optimus | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| React integration | Learn how to use DHTMLX Toolbar with React (Demo) |
| Angular integration | Learn how to use DHTMLX Toolbar with Angular (Demo) |
| Vue integration | Learn 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.
| Topic | Description |
|---|---|
| Group buttons | The example shows how to group controls |
| Badges | The example shows how to add a badge with a number to the control |
| Tooltips | The example shows how to add a tooltip for the control |
| Two state | Learn how to create a navItem with active and inactive states (Example) |
| Multiclick | The 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.
| Topic | Description |
|---|---|
| Adding HTML content into items | Learn how to add a custom image into the toolbar item (Example) |
| Applying custom icons | Learn how to add custom icons to Toolbar items (Example) |
| Styling Toolbar | Learn how to customize Toolbar (Example) |
| CSS template A | The example of a CSS template for DHTMLX Toolbar |
| List of CSS classes | A 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.
| Topic | Description |
|---|---|
| Disabling / enabling controls | Learn how to disable or enable controls on a page dynamically (Example) |
| 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) |
| Setting values/states of controls | Learn how to change the value or state of a control (Example) |
| Getting values/states of controls | Learn how to get the current value or state of a control (Example) |
| Setting focus on an Input control | Learn 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.
| Topic | Description |
|---|---|
| Adding controls | Learn how to add new controls into Toolbar dynamically (Example) |
| Updating controls | Learn how to update config options of a Toolbar control (for example, to change the icon of the control) (Example) |
| Rearranging controls | Learn how to move Toolbar controls to another position |
| Removing controls | Learn how to remove a control from Toolbar (Example) |
| TreeCollection API | Check the list of all available TreeCollection API |
How to work with selection
In this section you may study how to work with selection functionality.
| Topic | Description |
|---|---|
| Setting selection | Learn how to select a Toolbar control (Example) |
| Is selected | Learn how to check whether a Toolbar control is selected (Example) |
| Getting selected items | Learn how to get the selected items |
| Removing selection | Learn how to remove selection from a Toolbar control (Example) |
How to work with Toolbar events
This section explains how to work with Toolbar events.
| Topic | Description |
|---|---|
| Event basic rules | Learn basic rules on how to work with events |
| Event handling | Learn 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
| Topic | Description |
|---|---|
| Toolbar methods | Check the list of Toolbar methods |
| Toolbar events | Check the list of Toolbar events |
| Toolbar properties | Check the list of Toolbar properties |
| TreeCollection API | Check the API of TreeCollection to work with Toolbar data |
Toolbar controls API
| Topic | Description |
|---|---|
| Button properties | Check the list of properties of the Button control |
| Custom HTML properties | Check the list of properties of the Custom HTML control |
| Datepicker properties | Check the list of properties of the Datepicker control |
| ImageButton properties | Check the list of properties of the ImageButton control |
| Input properties | Check the list of properties of the Input control |
| MenuItem properties | Check the list of properties of the MenuItem control |
| NavItem properties | Check the list of properties of the NavItem control |
| SelectButton properties | Check the list of properties of the SelectButton 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 functionality of the library which can be useful while working with Toolbar.
| Topic | Description |
|---|---|
| Touch support | Learn how to work with touch support (Example) |
| TypeScript support | Learn how to work with TypeScript |
| Custom scroll | Learn how to enable custom scroll in Toolbar |
| AwaitRedraw | Learn 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!