This is a migrated thread and some comments may be shown as answers.

Remove swipe to open drawers feature in Kendo UI Mobile

10 Answers 510 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Nishant
Top achievements
Rank 1
Nishant asked on 31 Oct 2013, 08:03 AM

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.

10 Answers, 1 is accepted

Sort by
0
Eugen
Top achievements
Rank 1
answered on 31 Oct 2013, 04:00 PM
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.
0
Petyo
Telerik team
answered on 01 Nov 2013, 09:03 AM
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.
0
Nishant
Top achievements
Rank 1
answered on 12 Nov 2013, 07:50 AM
I got your solution but please let me know the exact code to open the drawer manually.
0
Steve
Telerik team
answered on 13 Nov 2013, 04:29 PM
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.
0
Marco
Top achievements
Rank 1
answered on 21 Jan 2014, 11:50 AM
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>
0
Steve
Telerik team
answered on 22 Jan 2014, 01:11 PM
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.
0
Rodney
Top achievements
Rank 1
answered on 28 Feb 2014, 09:16 AM
Just confirming that the kendo.mobile.min.js from kendoui.complete.2013.3.1324.trial fixes this issue on Android
0
Kaloyan
Telerik team
answered on 28 Feb 2014, 12:01 PM
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)
0
Sean Wilkening
Top achievements
Rank 1
answered on 22 May 2015, 07:15 PM

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.

 

0
Kaloyan
Telerik team
answered on 27 May 2015, 01:13 PM
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.

 
Tags
General Discussions
Asked by
Nishant
Top achievements
Rank 1
Answers by
Eugen
Top achievements
Rank 1
Petyo
Telerik team
Nishant
Top achievements
Rank 1
Steve
Telerik team
Marco
Top achievements
Rank 1
Rodney
Top achievements
Rank 1
Kaloyan
Telerik team
Sean Wilkening
Top achievements
Rank 1
Share this question
or