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 the CustomToolComponent to the providers array:

Copy Codeimport { 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.

Copy Codeimport {
    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 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.

Suggested Links

• Built-In Control Types
• API Reference of the ToolBar
• API Reference of the ToolBarToolComponent