Action Buttons
Starting with 2025 Q2 release, the ActionSheet allows configuring of orientation and layout of the action buttons.
Orientation
By default, the ActionSheet component displays the action buttons in a Horizontal mode, but also allows you to set their visualization to Vertical. You can control the orientation with the ActionButtonsOrientation configuration option.
The example below demonstrates the action buttons appearance in Vertical mode.
@(Html.Kendo().ActionSheet()
.Name("actionsheet")
.Title("Select item")
.ActionButtonsOrientation(ActionButtonsOrientation.Vertical)
.Items(items =>
{
items.Add().Text("Edit Item").IconClass("k-i-pencil").Click("onClick");
items.Add().Text("Add to Favorites").IconClass("k-i-heart").Click("onClick");
})
.ActionButtons(buttons =>
{
buttons.Add().Icon("check").FillMode("solid").ThemeColor("primary").Rounded("full").Size("large").Text("Confirm");
buttons.Add().Icon("cancel").FillMode("outline").ThemeColor("info").Rounded("full").Size("large").Text("Cancel");
})
)Alignment
The ActionSheet component supports multiple types of ActionButtonsAlignment. By default, the action buttons are rendered Stretched. This alignment of the action buttons works only when the ActionButtonsOrientation is set to Horizontal mode.
The example below demonstrates how to align the action buttons at the start edge of the footer container.
@(Html.Kendo().ActionSheet()
.Name("actionsheet")
.Title("Select item")
.ActionButtonsAlignment(ActionButtonsAlignment.Start)
.Items(items =>
{
items.Add().Text("Edit Item").IconClass("k-i-pencil").Click("onClick");
items.Add().Text("Add to Favorites").IconClass("k-i-heart").Click("onClick");
})
.ActionButtons(buttons =>
{
buttons.Add().Icon("check").FillMode("solid").ThemeColor("primary").Rounded("full").Size("large").Text("Confirm");
buttons.Add().Icon("cancel").FillMode("outline").ThemeColor("info").Rounded("full").Size("large").Text("Cancel");
})
)