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

Bug with scrollbar position

19 Answers 741 Views

Grid

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

Simon asked on 14 Apr 2015, 11:25 PM

untitled.png

Hello,

I discovered a bug with the grid's vertical scrollbar when dealing with asynchronous read call. Indeed, if you start moving scrollbar's slider with the mouse up and down, you'll end up firing a bunch of Transport.Read requests. If those requests are treated asynchronously (like most ajax requests), the grid seems to have some problem displaying the right data.

I did create this snippet to simulate the problem. If you take a look at my print screen, you'll notice that the displayed indexes are from 42401 to 42600 out of the 250 000 records. However, you'll also notice that the slider is almost at the bottom of the slider. Based on the __count value provided to the grid, the slider position for those indexes should be somewhere near the top of the scrollbar (about 20%).

This image alone is enough to confirm a problem with the grid scrollbar. However, the real problem is not the slider position but the displayed data itself. Indeed, by releasing the slider at this position I was expecting the indexes over 230 000 to be displayed but it's not the case.

Is there a workaround to fix this?

Best regards,

Simon

19 Answers, 1 is accepted

answered on 22 Apr 2015, 06:34 AM

Hi Simon,

It appears that the specific databinding technique used in the mockup example manages to circumvent the algorithms, which take care of preventing the issue with the incorrect rows being shown. Please usе an approach similar to one of the following:

http://demos.telerik.com/kendo-ui/grid/virtualization-remote-data

http://demos.telerik.com/kendo-ui/grid/virtualization-local-data

One more thing that you can do is force the Grid dataSource to make requests only after the user stops scrolling. This is achieved by executing the following line before initializing the Grid:

kendo.ui.VirtualScrollable.fn.options.prefetch = false;

Regards,
Dimo
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 22 Apr 2015, 03:28 PM

Hello Dimo,

Before implementing our logic, we followed kendo's documentation for the Transport.Read and the WebSocket example. The mockup I provided in the snippet is only a simplified version of what's really going on our side. I really think Kendo should consider fixing this because this feature is really useful and it gives us a lot of flexibility to handle our data.

The good news here is that your workaround is solving the issue... disabling prefetch is something I've been asking for awhile (see this post). However, unlike the Transport.Read, disabling prefetch isn't officially supported by Kendo (see Kiril Nikolov answer to my post).

I think Kendo should fix both of the problem mentioned above (custom Transport.Read + support prefetch disabling).

Best regards,

Simon

answered on 28 Apr 2015, 02:14 PM

Hello Dimo,

No, actually, the real problem here is when you try to scroll within the same page of data.

EX:

1-The current scroll position loads item 200 to 299

2- Usually, the grid's height will allow you to display only a part of those rows so let say that rows 230 to 239 are visibile.

If you want to scroll down to row 240 from there (using the row's top position), you will have to call the verticalScrollbar scrollTop function and this is where the problems starts.

If the prefetch is enable (default value): the grid will simply scroll to the row 240 without triggering anything else. That's the expected behavior (but the prefetch is causing the slider issue I pointed out in this post)

If the prefetch is disable: the grid will scroll to the row 240 AND trigger the grid dataBound callback. It's not necessary to trigger the callback at this point since the grid has already loaded all the data to be displayed. Triggering the dataBound callback have a real impact on the grid performance, especially when you want you need to navigate within the grid.