All Components

SplitButton Overview

The SplitButton component 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.

Basic Usage

The following example demonstrates the SplitButton in action.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-wrapper">
            <kendo-splitbutton (buttonClick)="onPaste()" [data]="data" [icon]="paste">
                Paste
            </kendo-splitbutton>
        </div>
    `
})
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');
    }
}

Features

The SplitButton delivers the following features:

Events

The following example demonstrates basic SplitButton events.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <kendo-splitbutton
            [data]="data"
            (itemClick)="onClick()"
            (focus)="onFocus()"
            (blur)="onBlur()"
            (open)="onOpen()"
            (close)="onClose()"
            >
            User settings
        </kendo-splitbutton>
        <event-log title="Event log" [events]="events"></event-log>
    `
})

export class AppComponent {
    public events: string[] = [];
    public data: Array<any> = [
        { text: 'My Profile' },
        { text: 'Friend Requests' },
        { text: 'Account Settings' },
        { text: 'Support' },
        { text: 'Log Out' }
    ];

    public onClick(): void {
        this.log("click");
    }

    public onFocus(): void {
        this.log("focus");
    }

    public onBlur(): void {
        this.log("blur");
    }

    public onOpen(): void {
        this.log("open");
    }

    public onClose(): void {
        this.log("close");
    }

    private log(event: string, arg: any): void {
        this.events.push(`${event}`);
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { AppComponent } from './app.component';
import { EventLogComponent }   from './event-log.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent, EventLogComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, ButtonsModule]
})
export class AppModule {}
import { Component, Input } from '@angular/core';

@Component({
  selector: 'event-log',
  template: `
    <div class="example-config">
      <h5>{{ title }}</h5>
      <ul class="event-log">
        <li *ngFor="let event of events.reverse()">{{ event }}</li>
      </ul>
    </div>
  `
})
export class EventLogComponent {
  @Input() title: string;
  @Input() events: string[];
}
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

On Clicking the List of Items

The itemClick event is triggered each time the user clicks the drop-down list of action items. The event data contains the data item which is bound to the clicked list item.

@Component({
    selector: 'my-app',
    template: `
        <kendo-splitbutton (itemClick)="onSplitButtonItemClick($event)" [data]="data">
            Reply
        </kendo-splitbutton>
    `
})
class AppComponent {
    public data: Array<any> = ['Reply All', 'Forward', 'Reply & Delete'];

    public onSplitButtonItemClick(dataItem?: string): void {
        if (dataItem) {
            console.log(dataItem);
        }
    }
}

On Clicking the SplitButton

The buttonClick event is triggered each time the user clicks the main button.

@Component({
    selector: 'my-app',
    template: `
        <kendo-splitbutton (buttonClick)="onSplitButtonClick()" [data]="data">
            Reply
        </kendo-splitbutton>
    `
})
class AppComponent {
    public data: Array<any> = ['Reply All', 'Forward', 'Reply & Delete'];

    public onSplitButtonClick(): void {
        console.log('SplitButton click');
    }
}
In this article