Components / Dialogs / Dialog

Action Buttons

The Dialog provides options for rendering action buttons and customizing their content and layout.

You can specify the action buttons of the Dialog by:

Using Actions Component

To specify action buttons in the Dialog, you can use the <kendo-dialog-actions> element. The layout of the buttons can be customized through the layout option of the <kendo-dialog-actions> component.

@Component({
    selector: 'my-app',
    template: `
      <kendo-dialog>
        <kendo-dialog-titlebar>
          <div style="font-size: 18px; line-height: 1.3em;">
            <span class="k-icon k-i-warning"></span> Delete Data
          </div>
        </kendo-dialog-titlebar>
        <p style="margin: 30px; text-align: center;">This action cannot be undone.</p>

        <kendo-dialog-actions [layout]="actionsLayout">
          <button kendoButton (click)="onDialogClose()">Cancel</button>
          <button kendoButton (click)="onDeleteData()" primary="true">Delete</button>
        </kendo-dialog-actions>
      </kendo-dialog>
    `
})
class AppComponent {
    public actionsLayout: string = 'normal';

    public onDialogClose() {
        alert("No data deleted.");
    }

    public onDeleteData() {
        alert("Data deleted.");
    }
}

Using Actions Collection

The actions can be listed as a DialogAction collection and passed to the actions property of the Dialog. In this case, the layout of the buttons can be customized through the actionsLayout option of the <kendo-dialog> component.

@Component({
    selector: 'my-app',
    template: `
    <kendo-dialog
        *ngIf="opened"
        [actions]="myActions"
        [actionsLayout]="actionsLayout"
        (action)="onAction($event)"
        title="Please confirm"
        (close)="close('cancel')"
        [minWidth]="250"
        [width]="450"
    >
        <p style="margin: 30px; text-align: center;">Are you sure you want to continue?</p>
    </kendo-dialog>
    `
})
export class AppComponent {
    public opened: boolean = true;
    public actionsLayout: string = 'normal';

    public myActions = [
        { text: 'No' },
        { text: 'Yes', primary: true }
    ]

    public onAction(action: DialogAction): void {
        console.log(action);
        this.opened = false;
    }

    public close(status) {
      this.opened = false;
    }

    public open() {
      this.opened = true;
    }
}

In this article