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:

1. Е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();
       }
   }

2. 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.

   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();
       }
   }

3. 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 is false, 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 or Right arrow is pressed when the tool is inside the ToolBar, or when the Up or Down 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() returns false, 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.

Suggested Links

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