ActionSheet Overview

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.

Kendo UI for jQuery Kendoka image

The ActionSheet is part of Kendo UI for jQuery, 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

To initialize the ActionSheet, use the <div> tag.

The following example demonstrates how to initialize the ActionSheet from an existing <div> element:

    <div id="actionsheet"></div>
    <script>
        var actionsheet = $('#actionsheet').kendoActionSheet({
        title:'Select item',
        items:[
            {
              text: 'Edit Item',
              iconClass: 'k-icon k-i-edit',
              click: onClick
            },
            {
              text: 'Add to Favorites',
              iconClass: 'k-icon k-i-heart',
              click: onClick
            },
            {
              text: 'Upload New',
              iconClass: 'k-icon k-i-upload',
              click: onClick
            },
            {
              text: 'Cancel',
              iconClass: 'k-icon k-i-cancel',
              group: 'bottom',
              click: onClick
            },
        ]
        }).data('kendoActionSheet');

        function onClick(e) {
            e.preventDefault();
            actionsheet.close();
        }
        actionsheet.open();
        setTimeout(function(){actionsheet.close()},2000)
</script

Functionality and Features

  • Items - the configuration allows you to set various attributes like icons and text.
  • Events - the exposed events of the component.
  • Accessibility - the ActionSheet supports various accessibility standards.

See Also

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