Remove swipe to open drawers feature in Kendo UI Mobile

[Nishant]

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.

[Eugen]

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.

[Petyo]

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.

[Nishant]

I got your solution but please let me know the exact code to open the drawer manually.

[Steve]

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.

[Marco]

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>

[Steve]

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.

[Rodney]

Just confirming that the kendo.mobile.min.js from kendoui.complete.2013.3.1324.trial fixes this issue on Android

[Kaloyan]

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

[Sean Wilkening]

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.

 

[Kaloyan]

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