Virtual Scrolling Grid re-positioned after datasource read

[Kenny]

In our application we have a virtual scrollable grid. We have implemented a function to refresh the grid data from the server by calling the datasource's "read" method. While this works to refresh the grid data, a side effect is that if you are in a certain position of a (virtual) page, the grid re-positions itself after the loading has completed. I've described it as well as I could but maybe an example will help. 

See fiddle: 
http://jsfiddle.net/kennymatic/jH2Lw/3/

scroll down a couple hundred records, and then click the "refresh" link, note the change in grid position. 

The question is, is calling the datasource.read() method the only way to refresh the data, if so is the re-positioning an issue of the grid that will be fixed or can you recommend any other workarounds? 

[Petur Subev]

Hello Kennny,

Thank you for providing the URL. The behavior that you experience is expected and unfortunately there is no work around to avoid it.

The position of the scroller on the right give us the exact page on which we are before rebinding the Grid, however we cannot determine how many record inside that page set are exactly scrolled and to restore that same state.

I am sorry for any inconvenience caused.

Kind Regards,
Petur Subev
Telerik

[Kris]

Hi Petur

Is there a chance that this issue will get fixed somewhere along the line?


Br,
Kris

[Petur Subev]

Hello Kris,

Feel free to suggest this on the official feedback portal. If many people find it handy and vote for it, the Dev team will consider its implementation.

Kind Regards,
Petur Subev
Telerik

[Micheal]

How about resetting the scroll position at the top of the page when user selects another page of results? Is there a way to do that?

I'm using a MVC wrapper for my Kendo Grid: 
                @(Html.Kendo()
                          .Grid(Model).Name("GridName")
                          .Events(e => e
                            .DataBound("JQFunction"))
                          .DataSource(dataSource => dataSource
                              .Ajax()
                              .ServerOperation(true)
                              .PageSize(25)
                              .Read(read => read.Action("Action", "Controller"))
                              .Model(model =>
                              {
                                  foreach (DataColumn column in Model.Columns)
                                  {
                                      model.Field(column.ColumnName, column.DataType);
                                  }
                              }))
                          .Columns(cols =>
                          {
                              ...
                          })
                          .ColumnMenu()
                          .Resizable(resizable => resizable
                              .Columns(true))
                          .Sortable(sortable => sortable
                              .Enabled(true)
        .SortMode(Kendo.Mvc.UI.GridSortMode.MultipleColumn))
                          .Pageable()
                          .Navigatable()
                          .HtmlAttributes(new { style = "height: 100%; width: 100%" }))

[Petur Subev]

Hello Michael,

Consider using regular paging, instead of scrollable virtualization.

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

Kind Regards,
Petur Subev
Telerik

 

 

[Mike]

Hi,

I realize this was posted years ago. I'm coming across the same issue now. Any resolution for it?

I've duplicated the issue here. Scroll for a bit, click the refresh button, scroll more, refresh. The results jump around.

https://dojo.telerik.com/oXIKeJAq

[Alex Hajigeorgieva]

Hello, Mikhail,

Thank you for the provided example. 

Unfortunately, this is a limitation of the Kendo UI virtually scrollable grid and it is outlined in the documentation:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/scrolling/virtual-scrolling#known-limitations

If you want to refresh the entire data in the grid, the suggestion is to move the scroll to the top. This is outlined in the known limitations above.

Alternatively, it might be better to implement serverPaging which forces the grid to make a read request during scrolling, without causing it to jump. 

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

Let me know in case you have further questions.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik