Action Buttons
The Dialog provides options for rendering action buttons and customizing their content.
To specify action buttons in the Dialog, use the <kendo-dialog-actions> element.
@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>
<button kendoButton (click)="onDialogClose()">Cancel</button>
<button kendoButton (click)="onDeleteData()" primary="true">Delete</button>
</kendo-dialog-actions>
</kendo-dialog>
`
})
class AppComponent {
public onDialogClose() {
alert("No data deleted.");
}
public onDeleteData() {
alert("Data deleted.");
}
}