ActionSheet HtmlHelper Overview

The Telerik ActionSheet HtmlHelper for ASP.NET Core is a server-side wrapper for the Kendo UI ActionSheet widget.

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

Visit the Demo page for the ActionSheet to see it in action.

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 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Initializing the ActionSheet

The following example demonstrates how to define the ActionSheet by using the ActionSheet HtmlHelper.

    @(Html.Kendo().ActionSheet()
        .Name("actionsheet")
    )

Basic Configuration

The following example demonstrates the basic configuration for the ActionSheet HtmlHelper.

    @(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>

Functionality and Features

  • Items - the configuration allows you to set various attributes like icons and text.
  • Events - the events that provide easy configuration or extension points for custom functionality
  • Accessibility - the ActionSheet supports various accessibility standards.

See Also

In this article
Not finding the help you need? Improve this article