This is a migrated thread and some comments may be shown as answers.

KendoUI Grid breaking in iPad [bug]

2 Answers 27 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 17 Mar 2014, 09:07 PM
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

2 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 19 Mar 2014, 01:25 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mike
Top achievements
Rank 1
answered on 20 Mar 2014, 03:44 PM
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.
Tags
Grid
Asked by
Mike
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Mike
Top achievements
Rank 1
Share this question
or