This is a migrated thread and some comments may be shown as answers.
Virtual Scrolling Grid re-positioned after datasource read
7 Answers 181 Views
This is a migrated thread and some comments may be shown as answers.
Kenny
Top achievements
Rank 1
Kenny asked on 18 Sep 2013, 10:54 PM
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? 

7 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 20 Sep 2013, 03:11 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kris
Top achievements
Rank 1
answered on 10 Feb 2014, 10:05 AM
Hi Petur

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


Br,
Kris
0
Petur Subev
Telerik team
answered on 11 Feb 2014, 03:44 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Micheal
Top achievements
Rank 1
answered on 12 May 2014, 06:18 PM
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%" }))
0
Petur Subev
Telerik team
answered on 13 May 2014, 11:46 AM
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
 
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 2019, 06:21 PM

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

0
Alex Hajigeorgieva
Telerik team
answered on 22 Mar 2019, 01:09 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Kenny
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Kris
Top achievements
Rank 1
Micheal
Top achievements
Rank 1
Mike
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or