ASP.NET Core ActionSheet Overview

Telerik UI for ASP.NET Core Ninja image

The ActionSheet is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The Telerik UI ActionSheet TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI ActionSheet widget.

The ActionSheet is a dialog that displays a set of options for the user to choose from. The component appears on top of the app's content, and the user must manually dismiss it before resuming the interaction with the app.

Initializing the ActionSheet

The following example demonstrates how to define the ActionSheet.

    @(Html.Kendo().ActionSheet()
        .Name("actionsheet")
    )
    <kendo-actionsheet name="actionsheet">
    </kendo-actionsheet>

Basic Configuration

The following example demonstrates a basic configuration of the ActionSheet component with multiple items.

    @(Html.Kendo().ActionSheet()
        .Name("actionsheet")
        .Title("Select item")
        .Items(items =>
        {
            items.Add().Text("Edit Item").IconClass("k-icon k-i-edit").Click("onClick");
            items.Add().Text("Add to Favorites").IconClass("k-icon k-i-heart").Click("onClick");
            items.Add().Text("Upload New").IconClass("k-icon k-i-upload").Click("onClick");
            items.Add().Text("Cancel").IconClass("k-icon k-i-cancel").Group("bottom").Click("onClick");
        })
    )

    <script>
    $(function() {
        // The Name() of the ActionSheet is used to get its client-side instance.
        function onClick(e) {
            e.preventDefault();
            var actionsheet = $("#actionsheet").data("kendoActionSheet");
            actionsheet.close();
        }
    });
    </script>
    <kendo-actionsheet name="actionsheet" title="Select item">
        <items>
            <item text="Edit Item" icon-class="k-icon k-i-edit" click="onClick" />
            <item text="Add to Favorites" icon-class="k-icon k-i-heart" click="onClick" />
            <item text="Upload New" icon-class="k-icon k-i-upload" click="onClick" />
            <item text="Cancel" icon-class="k-icon k-i-cancel" group="bottom" click="onClick" />
        </items>
    </kendo-actionsheet>

    <script>
    $(function() {
        // The Name() of the ActionSheet is used to get its client-side instance.
        function onClick(e) {
            e.preventDefault();
            var actionsheet = $("#actionsheet").data("kendoActionSheet");
            actionsheet.close();
        }
    });
    </script>

Functionality and Features

  • Items—You can configure the desired items and set various attributes like icons, text, descriptions, and more.
  • Events—Handle the component events and implement the any custom functionality.
  • Accessibility—The ActionSheet is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation.

Next Steps

See Also

In this article