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 Tool to the ToolBar
In order to achieve this, follow the steps below:
- Еxtend the
ToolBarToolComponent
class and add theCustomToolComponent
to the providers array:
import { 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 using
<ng-template>
and get a reference to it by using a template reference variable. This template is used by the toolbar for the custom tool rendering.Please note that the class field holding the reference to the template has to be named
toolbarTemplate
.
import {
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>
{{ text }}
<kendo-dropdownlist></kendo-dropdownlist>
</ng-template>
`
})
export class CustomToolComponent extends ToolBarToolComponent {
public tabindex = -1;
@ViewChild('toolbarTemplate', { static: true }) public toolbarTemplate: TemplateRef<any>;
constructor() {
super();
}
}
- Add the rest of the required custom tool functionality and include the tool in the ToolBar.
Adding Custom Tool to the Overflow Popup
The Toolbar provides options for adding tools to the Overflow Popup. This is especially useful when there is insufficient ToolBar width to display all tools.
To add a tool to the Overflow Popup, create a template using <ng-template>
and get a reference to it by using a template reference variable. It is used by the toolbar for rendering the custom tool inside the overflow popup.
Please note that the class field holding the reference to the template has to be named
popupTemplate
.
Adding Keyboard Navigation
This section represents a guide for implementing keyboard navigation. This step is optional and is entirely up to the developer, whether it would be added.
The following three methods should be added in order to implement keyboard navigation. If these methods are not implemented, the tool will be skipped when using the arrow keys for navigation.
canFocus
- Determines whether the tool can be focused. If the returned value is false, the tool will not be part of the keyboard navigation.focus
- Called when the tool is being focused using keyboard navigation or mouse click.handleKey
- Returns boolean value, which determines whether the ToolBar will move the focus to the next/previous tool. The method is called when the tool is focused and one of the arrow keys is pressed (Left
orRight
arrow when the tool is inside the toolbar,Up
orDown
arrow when the tool is inside the overflow popup). If the return value istrue
, the ToolBar will not move the focus to the next/previous tool, which is usually required when the internal keyboard navigation of the underlying component is using the arrow keys. If thehandleKey()
returnsfalse
, the ToolBar will move the focus to the next/previous tool.