Control Types
You can add specific tools and controls to the ToolBar container.
Button Controls
The ToolBar supports the following button-type controls:
Buttons
To render a button in the ToolBar container, add the kendo-toolbar-button
tag during initialization. For more information, refer to the ToolBarButton API.
Toggle Buttons
To render a toggle button in the ToolBar container, add the kendo-toolbar-button
tag during initialization and set toggleable to true
. For more information, refer to the ToolBarButton API.
Button Groups
A ButtonGroup consists of multiple button elements that are visually separated in a group. In the overflow popup of the command, the ButtonGroup is shown as a list of commands.
The ButtonGroup supports single
and multiple
selection modes. The single
selection mode acts as a radio group and allows only one button to be selected at a time. When a user clicks on a button, it becomes selected and all other buttons that are part of the group become unselected. The multiple
selection mode allows more than one button to be selected at a time. If the user clicks a button that has been already selected, it will become unselected. By default the selection mode is set to multiple
.
To render a ButtonGroup in the ToolBar container, add the kendo-toolbar-buttongroup
tag during initialization. You can separately configure each Button in the ButtonGroup by using the kendo-toolbar-button
tag.
Split Buttons
A SplitButton allows the user to execute a default action, which is bound to a button or to choose a predefined action from a drop-down list. To render a SplitButton in the ToolBar container, add the kendo-toolbar-splitbutton
tag during initialization. For more information, refer to the ToolBarSplitButton API.
Drop-Down Buttons
When the DropDownButton is clicked, it displays a popup list with action items. To render a DropDownButton in the ToolBar container, add the kendo-toolbar-dropdownbutton
tag during initialization. For more information, refer to the ToolBarDropDownButton API.
Separators
You can configure separators to act as delimiters between the ToolBar tools.
Spacer
You can add a spacers to take up all available space between ToolBar tools.