Touch Gesture Support for Kendo UI Web

[Murray]

Hi, 

The website I am creating is responsive and displays on mobile, tablets and PCs. I'd like to know if KendoUI web has support for touch gestures such as:

Tap
Hold - e.g. to load a context menu or something similar
swipe left
swipe right
swipe up
swipe down
pinch
rotate-left
rotate-right

At the moment I am looking at Hammer.js - http://eightmedia.github.io/hammer.js/

I would much prefer if Kendo supported these features. 

Can you please let me know if :
1. Kendo UI Web does support these gestures?
2. Can I somehow use Kendo UI Mobile and Web at the same time to support these features?
3. Will these features be supported in the future for UI Web? 

Thanks

[Petyo]

Hi,

In case you are including kendo.all.min.js in your project, you can use the touch widget - unlike most mobile widgets, it does not require an instantiated mobile application. 

The touch widget supports most of the events you describe. You may have to implement additional logic for the pinch and rotate recognition, though. 

Regards,
Petyo
Telerik

[Murray]

Hi, 

I managed to create a div in my web page which listens to the touch events. 

However I have a problem in that the content of the div scrolls and bounces up and down like you see on a normal mobile phone.

Is it possible to stop it bouncing? 

Thanks,

[Petyo]

Hi,

If you want to avoid this, you will have to prevent the drag event (which in turn prevents the touchmove DOM event). 

<div data-role="touch" data-drag="foo">
</div>

<script>
function foo(e) {
 e.preventDefault();
}
</script>

Regards,
Petyo
Telerik

[Murray]

THanks for your responses, 

    window.myTouch = {
        touchstart: function (e) { $('#eventDesc').text("touch start"); return false; },
        swipe: function (e) { $('#eventDesc').text("swipe " + e.direction); },
        tap: function (e) { $('#eventDesc').text("tap"); },
        doubletap: function (e) { $('#eventDesc').text("double tap"); },
        hold: function (e) { $('#eventDesc').text("hold"); }
    }
    var app = new kendo.mobile.Application($('#mobileSupport'));

I have the above code as taken straight out of the touch example. 

Is it possible to have touch events without calling kendo.mobile.Application(...)? The reason I am asking this is because I don't want to include the kendo.mobile.js file, as I only use the touch functionality.

Furthermore Kendo documetnation says you cannot have kendo.web.js and kendo.mobile.js loaded at the same time, and this is also causing a problem for me. I don't want to include kendo.all.js as it is too big. 

What is the most efficient way (file size) to support touch in kendo UI web? 

Thanks, 

[Kiril Nikolov]

Hello Murray,

You can use the Kendo UI Touch widget without instantiating a Kendo UI Mobile application. Please check this jsBin for a possible implementation. Regarding your second question about the different packages, please take a look at the kendo.touch.min.js file. It is only 4KB and includes the Kendo UI Touch widget. 

I hope this information will be helpful for you.

Regards,
Kiril Nikolov
Telerik