Control Types

You can add specific tools and controls to the ToolBar container.

Button Controls

The ToolBar supports the following button-type controls:

Buttons

To render a button in the ToolBar container, add the kendo-toolbar-button tag during initialization. For more information, refer to the Button API.

@Component({
    selector: 'my-app',
    template: `
        <kendo-toolbar>
            <kendo-toolbar-button
                [text]="'Button'"
                [showText]="'both'"
                [icon]="'filter'"
                [showIcon]="'both'"
                [primary]="true"
                [look]="look"
                [disabled]="false"
                [tabIndex]="tabIndex"
                (click)="onClick()">
            </kendo-toolbar-button>
        </kendo-toolbar>
    `
})
class AppComponent {
    public onClick(): void {
        console.log("on click");
    }
}

Toggle Buttons

To render a toggle button in the ToolBar container, add the kendo-toolbar-button tag during initialization and set toggleable to true. For more information, refer to the Button API.

@Component({
    selector: 'my-app',
    template: `
        <kendo-toolbar>
            <kendo-toolbar-button
                [text]="'Toggle'"
                [showText]="'both'"
                [showIcon]="'both'"
                [primary]="true"
                [look]="look"
                [disabled]="false"
                [tabIndex]="tabIndex"
                [toggleable]="true"
                [selected]="true"
                (selectedChange)="onChange()">
            </kendo-toolbar-button>
        </kendo-toolbar>
    `
})
class AppComponent {
    public onChange(): void {
        console.log("on change");
    }
}

Button Groups

A ButtonGroup consists of multiple button elements that are visually separated in a group. In the overflow popup of the command, the ButtonGroup is shown as a list of commands.

The ButtonGroup supports the single and multiple types of selection modes. The single selection mode acts as a radio group and allows only one button to be selected at a time. When a user clicks on a button, it becomes selected, and all other buttons that are part of the group become unselected. The multiple selection mode allows more than one button to be selected at a time. If the user clicks already selected button, it will become unselected. By default the selection mode of the group is set to multiple.

To render a ButtonGroup in the ToolBar container, add the kendo-toolbar-buttongroup tag during initialization. You can separately configure each Button in the ButtonGroup by using the kendo-toolbar-button tag.

@Component({
    selector: 'my-app',
    template: `
        <kendo-toolbar>
            <kendo-toolbar-buttongroup [selection]="'multiple'">
                <kendo-toolbar-button [toggleable]="true" [icon]="'align-left'"></kendo-toolbar-button>
                <kendo-toolbar-button [toggleable]="true" [icon]="'align-center'"></kendo-toolbar-button>
                <kendo-toolbar-button [toggleable]="true" [icon]="'align-right'"></kendo-toolbar-button>
                <kendo-toolbar-button [toggleable]="true" [icon]="'align-justify'"></kendo-toolbar-button>
            </kendo-toolbar-buttongroup>
            <kendo-toolbar-separator></kendo-toolbar-separator>
            <kendo-toolbar-buttongroup [selection]="'single'">
                <kendo-toolbar-button [toggleable]="true" [icon]="'bold'"></kendo-toolbar-button>
                <kendo-toolbar-button [toggleable]="true" [icon]="'italic'"></kendo-toolbar-button>
                <kendo-toolbar-button [toggleable]="true" [icon]="'underline'"></kendo-toolbar-button>
            </kendo-toolbar-buttongroup>
        </kendo-toolbar>
    `
})
class AppComponent { }

Split Buttons

A SplitButton allows the user to execute a default action which is bound to a button or to choose a predefined action from a drop-down list. To render a SplitButton in the ToolBar container, add the kendo-toolbar-splitbutton tag during initialization. For more information, refer to the SplitButton API.

@Component({
    selector: 'my-app',
    template: `
        <kendo-toolbar>
            <kendo-toolbar-splitbutton
                [look]="look"
                [text]="'Paste'"
                [data]="data"
                [icon]="'paste'"
                (buttonClick)="onPaste()"
            >
            </kendo-toolbar-splitbutton>
        </kendo-toolbar>
    `
})
class AppComponent {
    public data: Array<any> = [{
        text: 'Keep Text Only',
        icon: 'paste-plain-text',
        click: () => { console.log('Keep Text Only'); }
    }, {
        text: 'Paste as HTML',
        icon: 'paste-as-html',
        click: () => { console.log('Paste as HTML'); }
    }, {
        text: 'Paste Markdown',
        icon: 'paste-markdown',
        click: () => { console.log('Paste Markdown'); }
    }, {
        text: 'Set Default Paste',
        click: () => { console.log('Set Default Paste'); }
    }];

    public onPaste(): void {
        console.log('Paste');
    }
}

Drop-Down Buttons

The DropDownButton looks like the button. When clicked, it displays a popup list with action items. To render a DropDownButton in the ToolBar container, add the kendo-toolbar-dropdownbutton tag during initialization. For more information, refer to the DropDownButton API.

@Component({
    selector: 'my-app',
    template: `
        <kendo-toolbar>
            <kendo-toolbar-dropdownbutton
                [text]="'Paste Variations'"
                [data]="data">
            </kendo-toolbar-dropdownbutton>
        </kendo-toolbar>
    `
})
class AppComponent {
    public data: Array<any> = [{
        text: 'Paste',
        icon: 'paste',
        click: () => { console.log('Paste'); }
    }, {
        text: 'Keep Text Only',
        icon: 'paste-plain-text',
        click: () => { console.log('Keep Text Only'); }
    }, {
        text: 'Paste as HTML',
        icon: 'paste-as-html',
        click: () => { console.log('Paste as HTML'); }
    }, {
        text: 'Paste Markdown',
        icon: 'paste-markdown',
        click: () => { console.log('Paste Markdown'); }
    }, {
        text: 'Set Default Paste',
        click: () => { console.log('Set Default Paste'); }
    }];

    public onPaste(): void {
        console.log('Paste');
    }
}

Separators

You can configure separators to act as delimiters between the ToolBar tools.

@Component({
    selector: 'my-app',
    template: `
        <kendo-toolbar>
            <kendo-toolbar-button [text]="'Button 1'"></kendo-toolbar-button>
            <kendo-toolbar-separator></kendo-toolbar-separator>
            <kendo-toolbar-button [text]="'Button 2'"></kendo-toolbar-button>
        </kendo-toolbar>
    `
})
class AppComponent { }

Custom Control Types

You can create custom control types by extending the base ToolBarToolComponent class.

To extend the ToolBarToolComponent class, you need to:

  • Mandatory
    • Publish the custom tool component with a token that points to the base ToolBarToolComponent class.
    • Define the toolbarTemplate and get a reference to it. The toolbarTemplate is used when the toolbar renders the custom tool.
    • Implement the outerWidth method. The outerWidth returns the outer width (including the margins) of the toolbar template content.
  • Optional
    • Define the popupTemplate and get a reference to it. The popupTemplate is used when the ToolBar is responsive and allows you to render the custom tool within the overflow popup.
    • Implement the canFocus, focus and handleKey methods. They are used by the keyboard navigation in order to determine if a given tool can receive focus and how it will behave when it is focused. If those methods are not implemented, the tool will be considered as non focusable.

The following example demonstrates how to add a custom input to a non-responsive ToolBar by using the toolbarTemplate.

import {
    Component,
    Input,
    TemplateRef,
    ViewChild,
    ElementRef,
    forwardRef
} from '@angular/core';
import { ToolBarToolComponent } from '@progress/kendo-angular-toolbar';

export function outerWidth(element: any): number {
    let width = element.offsetWidth;
    const style = getComputedStyle(element);

    width += (parseFloat(style.marginLeft) || 0 + parseFloat(style.marginRight) || 0);
    return width;
}

@Component({
    providers: [{provide: ToolBarToolComponent, useExisting: forwardRef(() => CustomToolComponent)}],
    selector: 'custom-tool',
    template: `
        <ng-template #toolbarTemplate>
            <span #toolbarElement style="color: red;">
                <button [tabindex]="tabindex" #button class="k-button">{{ text }}</button>
            </span>
        </ng-template>
    `
})
export class CustomToolComponent extends ToolBarToolComponent {
    public tabindex = -1;

    @Input() public text: string;

    @ViewChild('toolbarTemplate') public toolbarTemplate: TemplateRef<any>;
    @ViewChild('toolbarElement') public toolbarElement: ElementRef;
    @ViewChild('button') public button: ElementRef;

    constructor() {
        super();
    }

    public get outerWidth(): number {
        if (this.toolbarElement) {
            return outerWidth(this.toolbarElement.nativeElement);
        }
    }

    public canFocus(): boolean {
        return true; // marks the tools as focusable
    }

    public focus(): void {
        // manage the roving tabindex
        // see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
        this.tabindex = 0;
        // focus the focusable element
        this.button.nativeElement.focus();
    }

    public handleKey(): boolean {
        // manage the roving tabindex
        // see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
        this.tabindex = -1;
        // tell the toolbar that the focus can move to the next/prev focusable tool
        return false;
    }
}
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <kendo-toolbar>
        <custom-tool [text]="'Custom Button'"></custom-tool>
        <kendo-toolbar-button [text]="'ToolBar Button'"></kendo-toolbar-button>
    </kendo-toolbar>
  `
})

export class AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { ToolBarModule } from '@progress/kendo-angular-toolbar';
import { CustomToolComponent } from './custom-tool.component';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    HttpClientJsonpModule,
    ToolBarModule
  ],
  declarations: [
    AppComponent,
    CustomToolComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

The following example demonstrates how to add a custom DropDownList to a responsive ToolBar by using both the toolbarTemplate and popupTemplate.

import {
    Component,
    Input,
    TemplateRef,
    ViewChild,
    ElementRef,
    OnInit,
    forwardRef
} from '@angular/core';
import { ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';

export function outerWidth(element: any): number {
    let width = element.offsetWidth;
    const style = getComputedStyle(element);

    width += parseFloat(style.marginLeft) || 0 + parseFloat(style.marginRight) || 0;
    return width;
}

@Component({
    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => CustomToolComponent) }],
    selector: 'custom-tool',
    template: `
        <ng-template #toolbarTemplate>
            <span #toolbarElement>
                {{ text }}
                <kendo-dropdownlist
                    #dropdownlist
                    [tabindex]="tabindex"
                    [(value)]="value"
                    [data]="items"
                    [defaultItem]="'Select sport...'"
                    [itemDisabled]="itemDisabled"
                >
                </kendo-dropdownlist>
            </span>
        </ng-template>
        <ng-template #popupTemplate>
            <span #popupElement>
                <button kendoButton #button [tabindex]="tabindex" [icon]="'heart'" (click)="opened = true">Fav Sport</button>
            </span>

            <kendo-dialog title="Select a favourite sport" *ngIf="opened" (close)="opened = false">
                <kendo-dropdownlist [(value)]="value" [data]="items" [defaultItem]="'Select sport...'"> </kendo-dropdownlist>
                <kendo-dialog-actions>
                    <button kendoButton (click)="opened = false">Ok</button>
                </kendo-dialog-actions>
            </kendo-dialog>
        </ng-template>
    `
})
export class CustomToolComponent extends ToolBarToolComponent implements OnInit {
    @Input() public text: string;

    @ViewChild('toolbarTemplate', { static: true }) public toolbarTemplate: TemplateRef<any>;
    @ViewChild('toolbarElement', { static: false }) public toolbarElement: ElementRef;

    @ViewChild('popupTemplate', { static: true }) public popupTemplate: TemplateRef<any>;
    @ViewChild('popupElement', { static: false }) public popupElement: ElementRef;

    @ViewChild('dropdownlist', { read: DropDownListComponent, static: false }) public dropdownlist: DropDownListComponent;
    @ViewChild('button', { static: false }) public button: ElementRef;

    public value: string;
    public items: Array<string> = ['Badminton', 'Tennis', 'Squash'];
    public opened = false;
    public tabindex = -1;
    public itemDisabled: (itemArgs: { dataItem: any; index: number }) => boolean;

    constructor() {
        super();
    }

    public ngOnInit(): void {
        this.itemDisabled = (itemArgs: { dataItem: any; index: number }) =>
            !this.overflows && this.dropdownlist && !this.dropdownlist.isOpen;
    }

    public get outerWidth(): number {
        if (this.toolbarElement) {
            return outerWidth(this.toolbarElement.nativeElement);
        }
    }

    public canFocus(): boolean {
        return true; // marks the tools as focusable
    }

    public focus(): void {
        // manage the roving tabindex
        // see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
        this.tabindex = 0;
        if (this.overflows) {
            // focus the button in the overflowTemplate
            this.button.nativeElement.focus();
        } else {
            // focus the DropDownList in the toolbarTemplate
            this.dropdownlist.focus();
        }
    }

    public handleKey(): boolean {
        // manage the roving tabindex
        // see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
        this.tabindex = -1;
        // tell the toolbar that the focus can move to the next/prev focusable tool
        return false;
    }
}
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <h4>Resize the output frame to see responsive behavior</h4>

    <kendo-toolbar [overflow]="true">
        <custom-tool [text]="'Favourite sport'"></custom-tool>
        <kendo-toolbar-button [text]="'My button'"></kendo-toolbar-button>
        <kendo-toolbar-button [text]="'Toggle'" [toggleable]="true"></kendo-toolbar-button>
        <kendo-toolbar-splitbutton
            [text]="'Split Button'"
            [data]="splitButtonData">
        </kendo-toolbar-splitbutton>
    </kendo-toolbar>
  `
})

export class AppComponent {
    public splitButtonData: Array<any> = [{
        text: 'Option 1'
    }, {
        text: 'Option 2',
    }, {
        text: 'Option 3',
    }];
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';

import { ToolBarModule } from '@progress/kendo-angular-toolbar';
import { DropDownListModule } from '@progress/kendo-angular-dropdowns';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { DialogModule } from '@progress/kendo-angular-dialog';
import { CustomToolComponent } from './custom-tool.component';

import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        HttpClientJsonpModule,
        ToolBarModule,
        ButtonsModule,
        DialogModule,
        DropDownListModule
    ],
    declarations: [
        AppComponent,
        CustomToolComponent
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule { }
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article