Remove swipe to open drawers feature in Kendo UI Mobile

11 posts, 0 answers
  1. Nishant
    Nishant avatar
    2 posts
    Member since:
    Oct 2013

    Posted 31 Oct 2013 Link to this post

    We are developing a mobile app using Kendo UI Mobile and have implemented Right and Left Drawers. As a default feature, whenever anyone swipes left or right, the left or right drawer opens. We have also included charts in the applications which have inbuilt feature of pinch zoom. Please tell us how can we remove the default feature of opening left and right drawer through swipe in the area where chart is rendered.

     

    I’ve used  .data("kendoMobileDrawer").destroy(); and                 .data("kendoMobileDrawer").hide(); but nothing seems to work.

  2. Eugen
    Eugen avatar
    4 posts
    Member since:
    Sep 2013

    Posted 31 Oct 2013 Link to this post

    The only advice I can give is: be creative until there is a real way to do this.

    In our application we used the before-show event of the drawer. It is fired whenever the drawer is about to open, whether by swiping or by pressing a button or by calling show on the drawer object. By calling preventDefault() on the event object you can prevent the drawer from opening.

    In our application we included a global variable that is false by default. However when the user presses a certain button it is to true for 300ms. During this time we open the drawer manually. This way the drawer can only be opened with the button.

    One problem however is, that the before-show event is also fired when the drawer is about to close. So you need some kind of mechanism to allow closing after it has been opened.

    As already said: be creative here.
  3. Kendo UI is VS 2017 Ready
  4. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 01 Nov 2013 Link to this post

    Hello Nishant,

    The approach which Eugen outlined is correct. You can check some sample code in the Kendo UI documentation. You can also disable the drawer for this view by explicitly using the views configuration option.

    Regards,
    Petyo
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  5. Nishant
    Nishant avatar
    2 posts
    Member since:
    Oct 2013

    Posted 12 Nov 2013 Link to this post

    I got your solution but please let me know the exact code to open the drawer manually.
  6. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 13 Nov 2013 Link to this post

    Hi Nishant,

    You can use the show method of the Kendo UI Drawer widget, see the respective documentation for explanation and code snippet.

    Regards,
    Steve
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  7. Marco
    Marco avatar
    7 posts
    Member since:
    Nov 2013

    Posted 21 Jan 2014 Link to this post

    In my drawer I have put the data-swipe-to-open="false" but on my android  phone this does not work.
    If i swipe on the view the drawer still opens...
    I want to open the drawer only by button.

      <div data-role="drawer" id="my-drawer" data-position="right" data-views='["mapView"]' data-swipe-to-open="false">           
      </div>
  8. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 22 Jan 2014 Link to this post

    Hello Marco,

    This is a known problem that has already been fixed in the latest Kendo UI version, which you can download from the Kendo site and update the respective Kendo files in your Icenium project.

    Regards,
    Steve
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  9. Rodney
    Rodney avatar
    11 posts
    Member since:
    Oct 2010

    Posted 28 Feb 2014 Link to this post

    Just confirming that the kendo.mobile.min.js from kendoui.complete.2013.3.1324.trial fixes this issue on Android
  10. Kaloyan
    Admin
    Kaloyan avatar
    872 posts

    Posted 28 Feb 2014 Link to this post

    Hi Rodney,

    I am glad the issue is resolved now. Thank you for sharing.

    Please, let us know if there is anything else we can help with.

    Regards,
    Kaloyan
    Telerik
    Icenium is now Telerik AppBuilder, and is part of the Telerik Platform. For more information on the new name, and to learn more about the Platform, register for the free online keynote and webinar on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT)
  11. Sean Wilkening
    Sean Wilkening avatar
    3 posts
    Member since:
    Feb 2004

    Posted 22 May 2015 Link to this post

    I am using the KendUI drawers. The 'show', 'beforeShow', and 'hide' events all only work when I use the physical button. The events do not fire for me when swiping open the drawer. I am using a scroller inside the drawer, and I need it to scroll back up to the top everytime the drawer is closed. I would have thought swiping would have some events but it doesn't appear to.

     

  12. Kaloyan
    Admin
    Kaloyan avatar
    872 posts

    Posted 27 May 2015 Link to this post

    Hi Sean,

    I just checked this in a newly created AppBuilder Kendo UI Drawer (JavaScript) app, by adding the following code in the index.html file:
      <div data-role="drawer" id="appDrawer" style="width: 270px" data-title="Navigation" data-before-show="onBeforeShow" data-show="onShow" data-hide="onHide">
     
    .   .   .    
     
        <script>
            function onBeforeShow() {
                console.log("onBeforeShow");
            }
            function onShow() {
                console.log("onShow");
            }
            function onHide() {
                console.log("onHide");
            }
        </script>

    and I was able to see the onBeforeShow, onShow and onHide events in the console. I checked this both in the AppBuilder Simulator and on actual device. I have also attached my project for guidance. Please, let me know if there is anything missing or different from your scenario in it and I will be happy to investigate further.

    I hope this helps.

    Regards,
    Kaloyan
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top
Kendo UI is VS 2017 Ready