Getting Started with the ActionSheet
This guide demonstrates how to get up and running with the Kendo UI for jQuery ActionSheet.
After the completion of this guide, you will be able to achieve the following end result:
<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();
</script
1. Create an Empty Div Element
First, create an empty <div> element on the page.
<div id="actionsheet"></div>
2. Initialize the ActionSheet
In this step, you will initialize the ActionSheet from the empty <div> element. All settings of the ActionSheet will be provided in the initialization script statement and you have to describe its layout and configuration in JavaScript.
<div id="actionsheet"></div>
<script>
// Target the div element by using jQuery and then call the kendoActionSheet() method.
$("#actionsheet").kendoActionSheet({
title:'Select item',
});
</script>
3. Add Action Items
You can add all the action items you need through the items configuration.
<div id="actionsheet"></div>
<script>
function onClick(e) {
e.preventDefault();
actionsheet.close();
}
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
}
]
});
actionsheet.open();