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.
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>
<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.