ActionSheet in Kendo UI Mobile

ActionSheet-Definition.html

<ul id="actions" data-role="actionsheet">
	<li class="km-actionsheet-title">Monday's meeting</li>
	<li><a href="#" data-action="reply>Reply</a></li>
	<li><a href="#" data-action="replyAll>Reply All</a></li>
	<li><a href="#" data-action="archive>Archive</a></li>
</ul>

ActionSheet-in-View.html

<div data-role="view">
    <ul data-role="listview" data-source="inbox" data-template="inboxItem"></ul>
    <ul id="actions" data-role="actionsheet">
		<li class="km-actionsheet-title">Monday's meeting</li>
		<li><a href="#" data-action="reply>Reply</a></li>
		<li><a href="#" data-action="replyAll>Reply All</a></li>
		<li><a href="#" data-action="archive>Archive</a></li>
	</ul>
</div>

Delete-ActionSheet-Option.css

.km-ios .km-button.delete{
	background-color: red;
	color: white;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, .5);
}

ListView-Template.html

<script type="text/x-kendo-template" id="tmplThingItem">
	<a class="km-listview-link"
	   data-role="listview-link"
	   data-rel="actionsheet"
	   href="\\#thingActions"
	   data-actionsheet-context="#:data.id#">
		<div class="thingTitle">#= data.description #</div>
	</a>
</script>

reply-Callback.js

function reply(e) {
	console.log("Replying to message ID: " + e.context);
}

TeamThing-ActionSheet.html

<ul data-role="actionsheet" id="thingActions">
	<li class="km-actionsheet-title">Status:</li>
	<li><a href="#" data-action="deleteThing" class="km-button delete">Delete</a></li>
	<li><a href="#" data-action="markCompleted">Mark Complete</a></li>
	<li><a href="#" data-action="markDelayed">Mark Delayed</a></li>
	<li><a href="#" data-action="markInProgress">Mark In-Progress</a></li>
</ul>