CODEWITHSUNDEEP
javascriptjqueryangularjskendo-uikendo-mobile
devmon
devmon

Reputation: 11

Kendo mobile actionsheet used in kendo ui web with angular

I try to get the Kendo Mobile ActionSheet running in web application along with AngularJS.

As Kendo mobile controls are supported in a non-mobile environment, I was wondering, how I can "open/show" the actionsheet using the ng-click attribute of a button.

I can see the actionsheet (hidden) in the DOM by using following markup:

<kendo-mobile-action-sheet id="inboxActions">
        <li class="km-actionsheet-title">Monday Meeting:</li>
        <li><a href="#" k-action="reply">Reply</a></li>
        <li><a href="#" k-action="replyAll">Reply All</a></li>
        <li><a href="#" k-action="archive">Archive</a></li>
    </kendo-mobile-action-sheet>
    <a class="reply"
    kendo-mobile-button
    k-rel="'actionsheet'"
    href="\#inboxActions"
    >Reply</a>

When I click on the button, I get routed to "root#inboxActions". But what I need is, to show the action sheet on that button click. Can I use 

ng-click
and how would I access the action-sheet in that click event function?

$('#inboxActions').data('kendoMobileActionSheet') returns undefined.

Thank you, devmon

Upvotes: 0

Views: 466

Answers (1)

devmon
devmon

Reputation: 11

Following worked for me:

<button kendo-mobile-button k-on-click="actions.open()">Regular button</button>
<a class="reply"
    kendo-mobile-button
    k-rel="'actionsheet'"
    k-on-click="actions.open()"
    >Reply</a>
<ul kendo-mobile-action-sheet="actions" k-popup='{"direction": "left"}'>
<li><a href="#" data-command="view">View</a></li>
<li><a href="#" data-command="rename">Rename</a></li>
<li><a href="#" data-command="delete">Delete</a></li>
<li><a href="#" data-command="perms">Set permissions ...</a></li>

Thank you, devmon

Upvotes: 1

Related Questions