Custom Control Types
The ToolBar provides options for creating custom tools. These could be added to the Toolbar and Overflow Popup. Keyboard navigation can also be applied.
Adding Custom Tools to the ToolBar
To add a custom tool to the ToolBar:
-
Extend the
ToolBarToolComponent
class and add theCustomToolComponent
to the providers array:tsimport { Component } from '@angular/core'; import { ToolBarToolComponent } from '@progress/kendo-angular-toolbar'; @Component({ providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => CustomToolComponent) }], selector: 'custom-tool', }) export class CustomToolComponent extends ToolBarToolComponent { constructor() { super(); } }
-
Create a template by using
<ng-template>
and get a reference to it through a template reference variable. The template is used for the custom tool rendering of the ToolBar.The class field, which holds the reference to the template, has to be named
toolbarTemplate
.tsimport { Component, TemplateRef, ViewChild, forwardRef } from '@angular/core'; import { ToolBarToolComponent } from '@progress/kendo-angular-toolbar'; import { DropDownListComponent } from '@progress/kendo-angular-dropdowns'; @Component({ providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => CustomToolComponent) }], selector: 'custom-tool', template: ` <ng-template #toolbarTemplate> <kendo-label [text]="text"> <kendo-dropdownlist></kendo-dropdownlist> </kendo-label> </ng-template> ` }) export class CustomToolComponent extends ToolBarToolComponent { public tabindex = -1; @ViewChild('toolbarTemplate', { static: true }) public declare toolbarTemplate: TemplateRef<any>; constructor() { super(); } }
-
Add the rest of the required custom tool functionality and include the tool in the ToolBar.
The following example demonstrates the full implementation of the suggested approach.
Adding Custom Tools to the Overflow Popup
The Toolbar provides options for adding tools to the Overflow Popup, which is useful especially when the width of the ToolBar for displaying all tools is insufficient.
To add a tool to the Overflow Popup, create a template by using <ng-template>
and get a reference to it through a template reference variable. The template is used by the toolbar for rendering the custom tool inside the Overflow Popup.
The class field, which holds the reference to the template, has to be named
popupTemplate
.
The following example demonstrates the implementation of the suggested approach.
Adding Keyboard Navigation
Implementing keyboard navigation to a custom control type is an optional step and it is entirely up to you whether to add it or not.
To add keyboard navigation, the ToolBar provides the following methods. If these methods are not implemented, when the arrow keys are used for navigation, the custom tool will be skipped.
-
canFocus
—Determines whether the tool can be focused. If the returned value isfalse
, the tool will not be part of the keyboard navigation. -
focus
—Called when the tool is being focused through the keyboard or with a mouse click. -
handleKey
—Returns a Boolean value, which determines whether the ToolBar will move the focus to the next or previous tool.The method is called when the tool is focused and one of the arrow keys is pressed—either when the
Left
orRight
arrow is pressed when the tool is inside the ToolBar, or when theUp
orDown
arrow is pressed when the tool is inside the Overflow Popup.If the return value is
true
, the ToolBar will not move the focus to the next or previous tool, which is usually required when the internal keyboard navigation of the underlying component is using the arrow keys.If the
handleKey()
returnsfalse
, the ToolBar will move the focus to the next or previous tool.
The following example demonstrates how to implement the keyboard navigation custom tool in the ToolBar.