ActionSheet JSP Tag Overview

The Kendo UI ActionSheet JSP tag is a server-side wrapper for the Kendo UI ActionSheet widget.

The Kendo UI 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.

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

Download Free Trial

Getting Started

Configuration

The ActionSheet provides a set of default API configuration options that can be set during its initialization. Follow the steps below to configure the Kendo UI ActionSheet JSP tag:

Step 1 Make sure you followed all the steps in the introductory article on Telerik UI for JSP.

Step 2 Create a new action method to render the view:

    @RequestMapping(value = {"index"}, method = RequestMethod.GET)
    public String index() {

        return "web/actionsheet/index";
    }

Step 3 Add the Kendo UI taglib mapping to the page:

    <%@taglib prefix="kendo" uri="https://www.telerik.com/kendo-ui/jsp/tags"%>

Step 4 Add the actionsheet tag and configure the component:

    <kendo:actionSheet name="actionsheet" title="Select item">
            <kendo:actionSheet-items>
                <kendo:actionSheet-item text="Edit Item" iconClass="k-icon k-i-edit"></kendo:actionSheet-item>
                <kendo:actionSheet-item text="Add to Favorites" iconClass="k-icon k-i-heart"></kendo:actionSheet-item>
                <kendo:actionSheet-item text="Cancel" iconClass="k-icon k-i-cancel" group="bottom"></kendo:actionSheet-item>
            </kendo:actionSheet-items>
    </kendo:actionSheet>

Items

The Kendo UI ActionSheet's items configuration allows you to set specific attributes of the ActionSheet items. You can set their:

• text
• icon
• group (items can be segregated in two groups - top and bottom.)
• description
• click event handler name

For the full set, refer to the API reference.

    <kendo:actionSheet name="actionsheet" title="Select item">
            <kendo:actionSheet-items>
                <kendo:actionSheet-item text="Edit Item" iconClass="k-icon k-i-edit" description="Select to enter edit mode." click="onClick"></kendo:actionSheet-item>
                <kendo:actionSheet-item text="Add to Favorites" iconClass="k-icon k-i-heart" click="onClick"></kendo:actionSheet-item>
                <kendo:actionSheet-item text="Cancel" iconClass="k-icon k-i-cancel" group="bottom" click="onClick"></kendo:actionSheet-item>
            </kendo:actionSheet-items>
    </kendo:actionSheet>

    <script>
            function onClick(e) {
                e.preventDefault();
                var actionsheet = $("#actionsheet").data("kendoActionSheet");
                actionsheet.close();
            }
    </script>

Event Handling

Subscribe to Events

You can subscribe to the events exposed by Kendo UI ActionSheet by the handler name.

    <kendo:actionSheet name="actionsheet" title="Select item" open="onOpen" close="onClose">
            <kendo:actionSheet-items>
                    <kendo:actionSheet-item text="Edit Item" iconClass="k-icon k-i-edit" click="onClick"></kendo:actionSheet-item>
                <kendo:actionSheet-item text="Add to Favorites" iconClass="k-icon k-i-heart" click="onClick"></kendo:actionSheet-item>
                 <kendo:actionSheet-item text="Upload New" iconClass="k-icon k-i-upload" click="onClick"></kendo:actionSheet-item>
                <kendo:actionSheet-item text="Cancel" iconClass="k-icon k-i-cancel" group="bottom" click="onClick"></kendo:actionSheet-item>
            </kendo:actionSheet-items>
    </kendo:actionSheet>
    <script>
    function onOpen(e) {
       // handle the ActionSheet open event
    }

        function onClose(e) {
       // handle the ActionSheet close event
    }

    </script>

Reference

Existing Instances

You are able to reference an existing ActionSheet instance via the jQuery.data(). Once a reference is established, you are able to use the ActionSheet API to control its behavior.

    <kendo:actionSheet name="actionsheet" title="Select item" open="onOpen" close="onClose">
            <kendo:actionSheet-items>
                    <kendo:actionSheet-item text="Edit Item" iconClass="k-icon k-i-edit" click="onClick"></kendo:actionSheet-item>
                <kendo:actionSheet-item text="Add to Favorites" iconClass="k-icon k-i-heart" click="onClick"></kendo:actionSheet-item>
                 <kendo:actionSheet-item text="Upload New" iconClass="k-icon k-i-upload" click="onClick"></kendo:actionSheet-item>
                <kendo:actionSheet-item text="Cancel" iconClass="k-icon k-i-cancel" group="bottom" click="onClick"></kendo:actionSheet-item>
            </kendo:actionSheet-items>
    </kendo:actionSheet>

// Put this after your Kendo ActionSheet tag declaration
<script>
    $(function() {
            // Notice that the name of the ActionSheet is used to get its client-side instance
            var actionSheet = $("#actionsheet").data("kendoActionSheet");
    });
</script>

See Also

• Telerik UI for JSP API Reference Folder