Make controls in-active when drawer is shown

10 posts, 0 answers
  1. Ralph
    Ralph avatar
    33 posts
    Member since:
    Oct 2012

    Posted 15 Aug 2013 Link to this post

    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!
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 19 Aug 2013 Link to this post

    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:
    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Ralph
    Ralph avatar
    33 posts
    Member since:
    Oct 2012

    Posted 19 Aug 2013 Link to this post

    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.
  5. Zachary
    Zachary avatar
    23 posts
    Member since:
    Feb 2013

    Posted 20 Aug 2013 Link to this post

    Here's my vote as well for an option to disable swiping on the drawer.
  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 21 Aug 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Zachary
    Zachary avatar
    23 posts
    Member since:
    Feb 2013
  8. David
    David avatar
    60 posts
    Member since:
    Nov 2012

    Posted 19 Sep 2013 Link to this post

    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.
  9. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 23 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. David
    David avatar
    60 posts
    Member since:
    Nov 2012

    Posted 23 Sep 2013 Link to this post

    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
  11. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 25 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready