Skip to main content

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

TopicDescription
Basic initializationLearn how to initialize Ribbon

Loading data into Ribbon

TopicDescription
Loading data into RibbonRead how to load the initial data into Ribbon
Initialization with config.dataThe 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 TreeCollectionThe example shows how to load data from external TreeCollection

Ribbon controls

TopicDescription
BlockLearn how to add a Block control into the ribbon (Example 1, Example 2)
ButtonLearn how to add a Button control into the ribbon (Example)
Custom HTMLLearn how to add an item with custom HTML content into the ribbon (Example)
ImageButtonLearn how to add a button with an image into the ribbon
InputLearn how to add an Input control into the ribbon (Example)
NavItemLearn how to add a NavItem control into the ribbon (Example)
SelectButtonLearn how to add a SelectButton control into the ribbon (Example)
SeparatorLearn how to add a Separator control into the ribbon (Example)
SpacerLearn how to add a Spacer control into the ribbon (Example)
TitleLearn how to add a Title control into the ribbon

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

How to customize Ribbon

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

TopicDescription
Adding HTML content into itemsThe example shows how to add custom element into the Ribbon items
Applying custom iconsLearn how to add custom icons to Ribbon items (Example)
Styling RibbonLearn how to customize a Ribbon (Example)
List of CSS classesA 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.

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)

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.

TopicDescription
Adding controlsLearn how to add new controls into Ribbon dynamically (Example)
Copying controlsLearn how to copy a control
Getting controlsLearn how to get a particular control, the parent or children of a control
Iterating through controlsLearn how to apply the necessary logic to all (or some) Ribbon controls, as well as to the parent or children of a control
Rearranging controlsLearn how to move Ribbon items to another position
Removing controlsLearn how to remove all controls from Ribbon at once
TreeCollection APICheck the list of all available TreeCollection API

How to work with selection

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

TopicDescription
Setting selectionLearn how to select a particular item (Example)
Is selectedLearn how to check whether a Ribbon 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 Ribbon events

This section explains how to work with Ribbon events.

TopicDescription
Event basic rulesLearn basic rules on how to work with events
Event handlingLearn 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

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

Ribbon controls API

TopicDescription
Block propertiesCheck the list of properties of the Block control
Button propertiesCheck the list of properties of the Button control
Custom HTML propertiesCheck the list of properties of the Custom HTML control
ImageButton propertiesCheck the list of properties of the ImageButton control
Input propertiesCheck the list of properties of the Input 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 Ribbon.

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