Disabled SplitButton

The SplitButton provides options to toggle its enabled and disabled state and configure its content.

Disabled State

By default, the SplitButton is enabled. To change this behavior, use the disabled property.

@Component({
    selector: 'my-app',
    template: `
      <div class="example-wrapper">
        <kendo-splitbutton [data]="data" [disabled]="disabled">
            Save
        </kendo-splitbutton>
        <button kendoButton (click)="toggleDisabled()">Toggle disabled</button>
      </div>
    `
})
class AppComponent {
    public disabled: boolean = true;

    public toggleDisabled(): void {
        this.disabled = !this.disabled;
    }

    public data: Array<any> = [{
        text: 'Save as'
    }, {
        text: 'Upload to drive'
    }];
}

Content Setup

You can configure the content of the SplitButton either:

• By adding the content between the opening and the closing tags, or
• By setting the text property.

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

Suggested Links

• API Reference of the SplitButton