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

Grid scrolling performance on (android) mobile browsers

3 Answers 335 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Luciano
Top achievements
Rank 1
Luciano asked on 26 Jul 2013, 07:31 AM
Hi,

I have noticed that when displaying large grids on an android tablet (Chrome for Android or the preinstalled Android Browser), scrolling performance is very poor.

For example when scrollable is set to true scrolling becomes painfully slow and useless both browsers: http://jsfiddle.net/wqCQN/19/

If scrollable.virtual is set to true it is pretty much the same on chrome but does not work at all in android browser http://jsfiddle.net/wqCQN/21/

Surprisingly to me, if scrollable is set to false http://jsfiddle.net/wqCQN/22/ scrolling becomes very smooth and responsive in both browsers, exactly how I would want it in all scrollable modes. However, the problem with this configuration is that column widths are not respected and column headers scroll away when scrolling.

UserAgents of tested browsers:
Mozilla/5.0 (Linux; U; Android 4.0.3; en-us; Transformer TF101 Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30
Mozilla/5.0 (Linux; Android 4.0.3; Transformer TF101 Build/IML74K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.94 Safari/537.36


Grids are the most common and important component of our interface and are the reason why we chose Kendo UI in the first place.

Is there a way to get it to perform better on mobile browsers with column headers staying visible while scrolling and possibly column widths still being applied?

Thanks.


3 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 30 Jul 2013, 11:15 AM
Hello Luciano,

Basically 300 items is a lot. I am afraid that there is nothing we can do, the scrolling of the Grid relies on the built-in browser scrolling capabilities (overflow:auto), which we do not have control over. 

Regarding the virtual scrolling not working at all - I tried to browse the demos with the Chrome browser for android and the remote virtualization was working fine.

http://demos.kendoui.com/web/grid/virtualization-remote-data.html

Does the linked demo above work on your side?

Kind Regards,
Petur Subev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Luciano
Top achievements
Rank 1
answered on 30 Jul 2013, 02:00 PM
Petur, thank you for replying.

The point that I tried to make is that for a kendo grid of the same size, there are two modes (first and third link in my original post) with very different scrolling performance. In one mode (scrollable:true) the scrolling is so slow on my device that it is useless while in the other mode (scrollable:false) scrolling performance is fast enough.

I was hoping that someone might be able to point out the exact difference between these two modes that makes the scrolling performance so much worse when scrollable is set to true.

I am wondering if it is possible to modify the scrollable:false mode in a way to get the features that are only present in scrollable:true (specified column widths to be respected and column headers to always be visible when scrolling the grid), basically I want the best of both modes.

Consider this example: http://jsfiddle.net/wqCQN/34/
Here I am trying to get back what "scrollable:false" takes away, that is column headers always visible. This is an ugly hack but I guess it can be done. In the same way I would want to somehow enforce specific widths on the columns while preserving scrolling performance.

Unfortunately, I have not yet been able to identify the core difference that makes the difference in performance.

P.S.
About the virtual scrolling, what I meant to say is that it does not work on the "Stock Android Browser" while it does work on "Chrome for Android" I tried with the demo linked. But that was just an observation, the main issue I am concerned with here is scrolling performance and the performance of virtual scrolling is bad compared to when scrollable is set to false.
0
Petur Subev
Telerik team
answered on 01 Aug 2013, 07:43 AM
Hello Luciano,

I am afraid I cannot offer you a work-around to change the built-in virtual scrolling.

Regarding the regular scrolling - we do not do any 'magic' behind the scenes - the scrolling is coming from the 

.k-grid-content

element which height is set to the height option of the Grid and the overflow-y:auto style added to it. 

However you can remove the height of that element and thus use the scroller of the whole page (which you mentioned is performing better and the horizontal scrolling will still be enabled). However the headers of the columns will scroll away when you scroll down.

e.g.

http://jsfiddle.net/wqCQN/35/


Kind Regards,
Petur Subev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Luciano
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Luciano
Top achievements
Rank 1
Share this question
or