Touch Gesture Support for Kendo UI Web

6 posts, 0 answers
  1. Murray
    Murray avatar
    13 posts
    Member since:
    Sep 2012

    Posted 25 Jun 2013 Link to this post

    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
  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 26 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Murray
    Murray avatar
    13 posts
    Member since:
    Sep 2012

    Posted 15 Jul 2013 Link to this post

    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,

  4. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 15 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Murray
    Murray avatar
    13 posts
    Member since:
    Sep 2012

    Posted 17 Jul 2013 Link to this post

    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, 
  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 18 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top