Features
This page contains structured information that will help you to start working with DHTMLX Ribbon and go into deep dive on its functionality.
How to start with DHTMLX Ribbon
In this section you can find out how to initialize Ribbon, how to load data into the component and how to integrate Ribbon into your applications.
Initialization
| Topic | Description |
|---|---|
| Basic initialization | Learn how to initialize Ribbon |
Loading data into Ribbon
| Topic | Description |
|---|---|
| Loading data into Ribbon | Read how to load the initial data into Ribbon |
| Initialization with config.data | The example shows how to load data into Ribbon 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 |
Ribbon controls
| Topic | Description |
|---|---|
| Block | Learn how to add a Block control into the ribbon (Example 1, Example 2) |
| Button | Learn how to add a Button control into the ribbon (Example) |
| Custom HTML | Learn how to add an item with custom HTML content into the ribbon (Example) |
| ImageButton | Learn how to add a button with an image into the ribbon |
| Input | Learn how to add an Input control into the ribbon (Example) |
| NavItem | Learn how to add a NavItem control into the ribbon (Example) |
| SelectButton | Learn how to add a SelectButton control into the ribbon (Example) |
| Separator | Learn how to add a Separator control into the ribbon (Example) |
| Spacer | Learn how to add a Spacer control into the ribbon (Example) |
| Title | Learn how to add a Title control into the ribbon |
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 Ribbon with React (Demo) |
| Angular integration | Learn how to use DHTMLX Ribbon with Angular (Demo) |
| Vue integration | Learn how to use DHTMLX Ribbon with Vue.js (Demo) |
How to customize Ribbon
In this section you can learn how to customize a Ribbon.
| Topic | Description |
|---|---|
| Adding HTML content into items | The example shows how to add custom element into the Ribbon items |
| Applying custom icons | Learn how to add custom icons to Ribbon items (Example) |
| Styling Ribbon | Learn how to customize a Ribbon (Example) |
| List of CSS classes | A set of CSS classes provided by the DHTMLX library |
How to work with Ribbon controls
In this section you may study how to disable and enable, hide and show Ribbon 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) |
How to work with data in Ribbon
This section will tell you how to use TreeCollection API for working with data of Ribbon, i.e. add, copy, remove, rearrange items, etc.
| Topic | Description |
|---|---|
| Adding controls | Learn how to add new controls into Ribbon dynamically (Example) |
| Copying controls | Learn how to copy a control |
| Getting controls | Learn how to get a particular control, the parent or children of a control |
| Iterating through controls | Learn how to apply the necessary logic to all (or some) Ribbon controls, as well as to the parent or children of a control |
| Rearranging controls | Learn how to move Ribbon items to another position |
| Removing controls | Learn how to remove all controls from Ribbon at once |
| TreeCollection API | Check the list of all available TreeCollection API |
How to work with selection
In this section you will learn how to work with selection functionality.
| Topic | Description |
|---|---|
| Setting selection | Learn how to select a particular item (Example) |
| Is selected | Learn how to check whether a Ribbon 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 Ribbon events
This section explains how to work with Ribbon 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 Popup events (Example) |
API reference
In this section you can find out corresponding references of Ribbon and its controls API.
Ribbon API
| Topic | Description |
|---|---|
| Ribbon methods | Check the list of Ribbon methods |
| Ribbon events | Check the list of Ribbon events |
| Ribbon properties | Check the list of Ribbon properties |
| TreeCollection API | Check the API of TreeCollection to work with Ribbon data |
Ribbon controls API
| Topic | Description |
|---|---|
| Block properties | Check the list of properties of the Block control |
| Button properties | Check the list of properties of the Button control |
| Custom HTML properties | Check the list of properties of the Custom HTML control |
| ImageButton properties | Check the list of properties of the ImageButton control |
| Input properties | Check the list of properties of the Input 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 Ribbon.
| Topic | Description |
|---|---|
| Touch support | Learn how to work with touch support |
| TypeScript support | Learn how to work with TypeScript |
| Custom scroll | Learn how to enable custom scroll in Ribbon |
| 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!