All Components

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

When you extend the ToolBarToolComponent class, you have to:

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

The following example demonstrates how to add custom input to the ToolBar.

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;">
                {{ text }}
                <input type="text" />
            </span>
        </ng-template>
    `
})
export class CustomToolComponent extends ToolBarToolComponent {
    @Input() public text: string;

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

    public get outerWidth(): number {
        if (this.toolbarElement) {
            return outerWidth(this.toolbarElement.nativeElement);
        }
    }
}
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <kendo-toolbar>
        <custom-tool [text]="'Search'"></custom-tool>
        <kendo-toolbar-button [text]="'My 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);
In this article