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
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
5 Answers, 1 is accepted
0
Hi,
Petyo
Telerik
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.
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Murray
Top achievements
Rank 1
answered on 15 Jul 2013, 05:39 AM
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,
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,
0
Hi,
Regards,
Petyo
Telerik
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
>
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Murray
Top achievements
Rank 1
answered on 18 Jul 2013, 02:43 AM
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,
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,
0
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
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!