Make controls in-active when drawer is shown

[Ralph]

Hi,

I would like to know how to make the controls become inactive when the drawer is displayed.

e.g. Currently, if I have a list view showing links to other pages, if I trigger the drawer to appear, I cannot press on the original list view to just hide the view.
The other pages would be displayed instead.

Thanks!

[Alexander Valchev]

Hi Ralph,

To achieve this you can cover the View content with a transparent element that will swallow the user input.
For your convenience I prepared a small sample which demonstrates the approach:

• http://jsbin.com/AJigasO/2/edit
  
  

We will consider implementing this as a build-in feature in one of our future releases.
I hope the information will help.

Regards,
Alexander Valchev
Telerik

[Ralph]

Hi,

In addition, can I disable swiping for displaying the drawer? I want to control it so that only pressing the menu button can user trigger its display.
e.g. In a list view full of list items, when user swipe on the list, the next page is displayed.

Thanks.

[Zachary]

Here's my vote as well for an option to disable swiping on the drawer.

[Alexander Valchev]

Hi guys,

I am afraid that this is currently not supported. If you would like to see it implemented in one of the future releases I suggest you to open a feature request at Kendo UI Feedback forum. In this way the other users will be able to cast votes for this idea. If it turns out to be popular we will consider adding it to the roadmap.

Regards,
Alexander Valchev
Telerik

[Zachary]

Done.

http://feedback.kendoui.com/...drawer-widget-option-to-disable-opening-via-swipe

Thanks,
Zachary

[David]

Hi Alexander I am having a couple of issues when using your technique related to swiping over a list view.  If you look at http://jsbin.com/iXekINi/1 on an iPhone (i tested on a 3gs running iOS 6) you will see what I am talking about, try to swipe over the list to the right, you will trigger the link instead of opening the drawer.  Is there a way around this?

The other issue I run into is that if you try to swipe the view back (that is once the drawer is open, try to swipe the view from the right to the left to cover the drawer back up), you end up scrolling the whole application to the left (drawer is still open but the viewport moves to the right).  All sorts of fun stuff happens at this point ...
-David

*update* I found a way to deal with the second problem I mentioned above, for some reason when a kendo app gets initalized the 'body' element is getting a style attribute added with 'overflow: auto', which is what allows you to scroll to the right.  I found that if I remove that style things seem to be much better, not sure what the ramifications for this are ... does kendo intentionally set this property?

For others running into this problem my code now looks something like this:
var app = new kendo.mobile.Application(document.body, kendoOptions);
$('body').css('overflow',''); //clobber the overflow portion of the 'style' attribute on body.

[Petyo]

Hi David,

thank you for contacting us. Indeed the case you have presented is somewhat complex. In general, the iOS tableview (which is the basis of our listview widget) responds and navigates to taps and swipes. We can reduce the responsiveness to tap only, allowing for the drawer to handle the swipe, but in that case this will reduce the listview usability. 

Given that, I can't provide a definitive answer about how this case should be handled. In case you have any insight (or examples), please share them.

Regards,
Petyo
Telerik

[David]

Hi Petyo,
  I like the way that the iOS mailbox app handles this (http://www.mailboxapp.com/).  If your swipe begins near the edge of the screen, it triggers a drawer open action.  However if you swipe on the item in the list view it triggers an item swipe event.  It sounds complex when described but in practice it seems to work well (I rarely get the unintended swipe response).
  -David

[Petyo]

Hello David,

indeed, this approach would resolve that conflict. However, both Facebook (who pioneered this pattern) and Foursquare react to swipes across the entire viewport; This means that we can't consider edge only swipes as universally acceptable pattern. 

Another thing worth mentioning is that swipes won't work on iOS 7, since it is a reserved gesture for back/forth navigation. 

Regards,
Petyo
Telerik