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.

Example
View Source
Edit In Stackblitz  
Change Theme:

Adding Custom Tool to the ToolBar

In order to achieve this, follow the steps below:

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.
Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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 or Right arrow when the tool is inside the toolbar, Up or Down arrow when the tool is inside the overflow popup). If the return value is true, 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 the handleKey() returns false, the ToolBar will move the focus to the next/previous tool.
Example
View Source
Edit In Stackblitz  
Change Theme: