Questions on Kendo UI for jQuery Forum

4 answers

184 views

I am trying to get an action sheet to modify itself depending on which screen it is on. Basically in my scenario I have an button on my navbar that I wish to be a context sensitive menu. I have a jsbin to show an example of what I am trying here ... http://jsbin.com/ehicof/5/edit.

If you hit the 'logout' button on the top right initially the action sheet looks fine, when you go to the search tab and then to 'search 1' I change the action sheet contents to have a 'search 1' button, however the action sheet doesn't grow (and thus the 'cancel' button is not visible). I have tried re-initializing the action sheet to no avail (using kendo.mobile.init), perhaps I am using it wrong. Am I taking the wrong approach here? Would I be better off making multiple action sheets and then changing the link on the navbar to the appropriate one?

ActionSheet

answered on 28 Dec 2012

5 answers

122 views

BUG: event passed to click event handler does not tell you which action button has been clicked

To reproduce:

Take the sample at http://demos.kendoui.com/mobile/actionsheet/index.html
Modify to call the same event handler

<ul data-role="actionsheet" id="inboxActions" data-open="onOpen" data-popup='{"direction": "left"}'>

<li class="km-actionsheet-title">Monday 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>

becomes

<ul data-role="actionsheet" id="inboxActions" data-open="onOpen" data-popup='{"direction": "left"}'>

<li class="km-actionsheet-title">Monday Meeting:</li>

<li><a href="#" data-action="singleEventHandler">Reply</a></li>

<li><a href="#" data-action="singleEventHandler">Reply All</a></li>

<li><a href="#" data-action="singleEventHandler">Archive</a></li>

</ul>

Then try implementing singleEventHandler as below:

function singleEventHandler(e) {

if (<some test involving e>) {

$("#actionResult").html("Replying to message #" + e.context);

} else if (<some other test involving e>) {

$("#actionResult").html("Replying to all in message #" + e.context);

} else if (<some other test involving e>) {

$("#actionResult").html("Archiving message #" + e.context);

}

     doMoreStuff();

}

The problem is e only has two properties: target and context

target is not the button which has triggered the event but the button which has opened the action sheet, so there is no way to know which button in the action sheet has been triggered in the event handler.

If not a bug, this is in my opinion a design issue which prevents properly factoring code as the only workaround is to multiply event handlers when it is not always necessary.

ActionSheet

answered on 10 Dec 2012

5 answers

113 views

Infinitely Growing ActionSheet

Here's an example of what I mean. Just open and close the actionsheet several times.
http://jsfiddle.net/RodEsp/r5eCm/

As far as I can tell this behavior can go on forever. I don't know if I'm doing something wrong.

Anyways, I noticed that the issue is that the width of the .k-animation-container grows every time it is opened and closed. I think it might have something to do with the "left:" css style that also changes when the container is opened and closed.

An easy way to see this is by opening the actionsheet, right clicking on the title and inspecting the element. Then just find the div with the .k-animation-container class above actionsheet <ul>. As you open and close the sheet you'll see the width of the container grow.

It is possible to fix this by setting .k-animation-container { width:100% !important; height:100% !important; } (In non iOS platforms the height also grows). But this breaks other elements that depend on the .k-animation-container such as comboboxes.

Hope you guys can help me out with this one!

ActionSheet

answered on 04 Sep 2012

5 answers

160 views

Changing text of the 'Cancel' option in Actionsheet

How does one change the text of the 'Cancel' option in Actionsheet?

The documentation states that there is an actionsheet configuration parameter of 'cancel', but gives no example how to apply such configurations. Is there some sort of actionsheet object that is supposed to be instantiated to do this?

Thanks in advance

ActionSheet

answered on 16 Jul 2012

1 answer

56 views

Contain ActionSheet inside container like in demo

In the demo on this page: http://demos.kendoui.com/mobile/actionsheet/index.html
the ActionSheet stays inside the demo container. In my app, the actionsheet takes over the whole browser window. How is that done in the demo?

ActionSheet