All Components

Data Binding

The SplitButton enables you to bind data of the primitive (strings and numbers) or of the complex (data inside objects) type.

Arrays of Primitive Data

The following example demonstrates how to bind the SplitButton to an array of primitive data.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-wrapper">
            <kendo-splitbutton [data]="data" (itemClick)="onItemClick($event)" (buttonClick)="onButtonClick()">
                Save
            </kendo-splitbutton>
        </div>
    `
})
class AppComponent {
    public data: Array<string> = ["Save as", "Upload to drive"];

    public onButtonClick(): void {
        console.log("Save");
    }

    public onItemClick(dataItem: string) {
        console.log(dataItem);
    }
}

Arrays of Complex Data

When the SplitButton is bound to complex data (objects), the component extracts the text value from the data items and, in this way, sets the text of the items in the popup. If the text field in the data objects is named text, the SplitButton gets its value automatically. However, if the name of the property in the data source is different—for example, actionText—you have to set it as a textField.

To set the enabled or disabled state of the SplitButton, use the disabled property. To set the icon of each item, use the icon, iconClass, and imageUrl properties of the data items. To attach a function that will be called when the user clicks an item, set the click property of a data item.

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

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