KendoUI Grid breaking in iPad [bug]

[Mike]

I have a grid setup and I set an interval so that it reads the dataSource every few seconds. This works fine on desktop and iPad (mostly).

The issue I'm seeing is that if you're scrolling the grid on iPad during a 'tick' (when I do grid.dataSource.read()), the grid freezes completely and I can't scroll. Oddly, the data still updates.

To reproduce:
I set up a JS Fiddle: http://jsfiddle.net/dmathisen/ERgkA/
(the numbers don't update but that's not the point, the issue is still reproducible)

1) Open in an iPad
2) Scroll vertically left and right for a couple seconds.
3) After 2 seconds, grid.dataSource.read() will trigger and the grid will freeze up and scrolling the grid breaks

[Alexander Valchev]

Hello Dmitri,

Thank you for getting in touch with us!

By specification touch events are triggered for a given DOM element. After data is re-read the Grid repaints which means that previously rendered rows are removed and replaced with new ones that display the new data. As a result the original DOM element which initiated the touch is gone and the touch end never fires. Since the mobile scroller listens for touch start/move/end event it gets stuck. The solution in this case is to cancel the event it currently listens for right before DOM is changed.

Please hook up to the dataBinding event of the Grid and use the following code:

dataBinding: function() {
    var scrollerElement = this.element.find("[data-role=scroller]"),
        scroller = scrollerElement.data("kendoMobileScroller");
    if(scroller) {
        scroller.userEvents.cancel();
    }
},

You will notice that after data is refreshed the user will have to touch again the grid content area in order to activate the scroller.

Regards,
Alexander Valchev
Telerik

 

 

[Mike]

Thank you.

So, with this the grid would still freeze, but would unfreeze on next touch. That's good.

What I did to eliminate all (maybe?) freezing was to set a 'canTick' parameter. During 'touchmove', canTick is set to false and grid.dataSource.read() is disabled.
Updated jsFiddle: http://jsfiddle.net/dmathisen/2S694/

Everything seems good now.
Thanks for the help.