Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Restricting Kendo Grid to scroll in one direction at a time on touch screen

When a user is on a touch screen device, I'd like to restrict diagonal scrolling - so the idea is to force scrolling one direction at a time - horizontal or vertical.

I've set up a JS Fiddle that detects if touch scrolling is enabled and I'm able to output the x and y coordinates. But I don't see an offset or anything and figure I need that to calculate the intended direction.

I know that apple uses a directionalLockEnabled that will restrict, so I'm wondering if something like this is available in Kendo. If not, maybe there's a way I can figure out which direction the user is intending to scroll in and 'freeze' the other coordinate.

A JS fiddle I created (relevant part in the dataBound method):

http://jsfiddle.net/dmathisen/tskebcqp/

(the relevant code only works on touch... but should work if you enable mobile emulation in dev tools)

Another issue is the amount of times the scroll event is triggered. When working, maybe I can set up a debounce to handle how often it's triggered.

like image 203
dmathisen Avatar asked Nov 30 '15 20:11

dmathisen


Video Answer


1 Answers

If you want to use javascript for this fix, you can calcul the ranges of the X and Y moves. For that with touch devices, set the start posi X and Y when touchstart and calcul the distances when touchmove

    var touchY = touchX = 0;
    $(document).delegate('.yourWrap', 'touchstart', function(e){
        touchX = e.originalEvent.touches[0].pageX;
        touchY = e.originalEvent.touches[0].pageY;
    });
    $(document).delegate('.yourWrap', 'touchmove', function(e){

        if (Math.abs(touchX - e.originalEvent.touches[0].pageX) 
            > Math.abs(touchY - e.originalEvent.touches[0].pageY)) {
            // Block overflow-y
        } else {
            // Block overflow-x
        }
        touchX = e.originalEvent.touches[0].pageX;
        touchY = e.originalEvent.touches[0].pageY;
    });

For wheel devices, compare delta

(e.wheelDeltaY/3 || -e.deltaY)
(e.wheelDeltaX/3 || -e.deltaX)
like image 108
Dux Avatar answered Oct 20 '22 16:10

Dux