Action Buttons
The Kendo UI for Angular Dialog supports displaying action buttons beneath its content. Action buttons let users confirm, cancel, or choose between the outcomes of the Dialog.
To specify the action buttons of the Dialog, use either of the following approaches:
Using the actions Component
To define action buttons in the Dialog, place the buttons inside the <kendo-dialog-actions> component as a direct child of the Dialog and handle their click actions in your application. The Dialog renders the actions below the content area.
To arrange the defined buttons, set the layout option of the <kendo-dialog-actions> component:
start—Aligns the buttons to the start of the Dialog.center—Centers the buttons.end—Aligns the buttons to the end of the Dialog.stretched—Stretches the buttons to fill the width of the Dialog. This is the default value.
The following example lets you change the layout of the buttons declared inside <kendo-dialog-actions>.
Using the actions Collection
You can also specify action buttons in the Dialog by passing a DialogAction collection to the Dialog's actions input and handling the action event. Use the Dialog's actionsLayout input to arrange these buttons. The default layout is stretched.
Starting with Kendo UI for Angular 12.0.0,
startreplaces the deprecatednormalvalue for theactionsLayoutoption.
The following example lets you change the layout of the buttons defined by an actions collection.