The toolbar provides an interface for selecting a command from a collection of commands. It has a rich set of features that includes orientation, responsive modes (scrollable and popup), templating, alignment of commands based on priority, and more.
A toolbar can be rendered based on a JSON array collection of properties such as header and content. Data binding can be achieved by forming an array collection of items.
A toolbar can also be rendered with the given HTML elements. HTML markup can be formed based on templating elements using the template engine.
The toolbar control adapts to the available space in two display modes: scrollable and popup.
Scrollable display mode displays toolbar commands in a single line with horizontal scrolling enabled, when the items overflow to the available space. You can swipe over the toolbar commands to scroll.
The popup menu is another type of overflow mode in which the toolbar container holds the items that can be placed within the available space. The items that do not fit the viewing area are moved to the overflow popup container. You can view the overflow tab headers by clicking the popup icon.
You can prioritize the commands to be displayed in the popup or toolbar when minimum space is available to view them.
You can also set specific items to be displayed always in the popup regardless of the available space on the toolbar.
Commands can be aligned to be positioned at the left, right, or center of the toolbar.
You can add icons with or without text to the buttons according to your preference. The icons’ position can be changed to the left or right.
You can add button text when necessary, which means you can decide to show text in popup alone, toolbar alone, or in both.
The toolbar can be customized with other controls like date picker, dropdown list and numeric textbox, using the item templating option.
To describe the actions of the command, a tooltip can be added. By default, HTML is supported, but the Essential JS2 tooltip control can also be used.
Commands used in the toolbar can be customized with styles such as CSS classes and HTML attributes such as ID, class, and styles.
Developers can control the appearance and behaviors of the toolbar using a rich set of APIs.