All Components

Disabled State and Content

The SplitButton provides options to control its state and content.

The component allows you to:

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'
    }];
}
In this article