All Components

Disabled ButtonGroup

You can enable or disable the ButtonGroup for Angular.

By default, the component is enabled. To disable the whole group of buttons, set the disabled attribute of the ButtonGroup to true.

To disable a specific button, set its own disabled attribute to true and leave the disabled attribute of the ButtonGroup undefined. If you define the disabled attribute of the ButtonGroup, it will take precedence over the disabled attributes of the underlying buttons and they will be ignored.

The following example demonstrates how to disable the ButtonGroup.

@Component({
    selector: 'my-app',
    template: `
        <div class="row">
            <div class="col-xs-12 col-sm-6 example-col">
                <p>Disabled ButtonGroup</p>
                <kendo-buttongroup [disabled]="disabled">
                    <button
                        kendoButton
                        [togglable]="true"
                        [disabled]="disabled"
                    >Bold</button>
                    <button
                        kendoButton
                        [togglable]="true"
                        [disabled]="disabled"
                    >Italic</button>
                    <button
                        kendoButton
                        [togglable]="true"
                        [disabled]="disabled"
                    >Underline</button>
                </kendo-buttongroup>
            </div>
            <div class="col-xs-12 col-sm-6 example-col">
                <p>ButtonGroup with Disabled Button</p>
                <kendo-buttongroup>
                    <button
                        kendoButton
                        [togglable]="true"
                    >Bold</button>
                    <button
                        kendoButton
                        [togglable]="true"
                        [disabled]="disabled"
                    >Italic</button>
                    <button
                        kendoButton
                        [togglable]="true"
                    >Underline</button>
                </kendo-buttongroup>
            </div>
        </div>
        <button kendoButton (click)="toggleDisabled()" [primary]="true">Toggle Disabled States</button>
    `
})
class AppComponent {
    public disabled: boolean = true;

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