Kendo UI for jQuery 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 110+ 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>
        var actionsheet = $('#actionsheet').kendoActionSheet({
        title:'Select item',
              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

        function onClick(e) {

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