All Components

Popup Items and Item Templates

The SplitButton provides options for setting the behavior of its popup and popup items.

The component enables you to:

Popup Items

To control the visibility of the popup items, use the toggle method. To configure the behavior of the popup, use the animate and popupClass settings.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-wrapper">
            <kendo-splitbutton [data]="data" [popupSettings]="{popupClass: popupClass, animate: true}">
                Reply
            </kendo-splitbutton>
        </div>
    `
})
class AppComponent {
    public animate: false;
    public popupClass: string = 'font-arial';
    public data: Array<any> = [{
        text: 'Reply All'
    }, {
        text: 'Forward'
    }, {
        text: 'Reply & Delete'
    }];
}

Item Templates

The SplitButton allows you to define templates for the items it displays in the popup.

@Component({
    selector: 'my-app',
    template: `
        <kendo-splitbutton [data]="data">
            Save
            <ng-template kendoSplitButtonItemTemplate let-dataItem>
                <em>{{ dataItem.text }}</em>
            </ng-template>
        </kendo-splitbutton>
    `
})
class AppComponent {
    public data: Array<any> = [{
        text: 'Save as'
    }, {
        text: 'Upload to drive'
    }];
}
In this article