Completed
Last Updated: 24 Mar 2023 11:17 by ADMIN
Release 4.2.0 (26/04/2023)
René
Created on: 03 Mar 2020 07:16
Category: Grid
Type: Feature Request
20
Paging should scroll to top of next page

With a pageable grid after scrolling down the first page and then paging, the next page should be scrolled to the top - but it is not.

Is there a way to scroll up by code until this is fixed ???

----

ADMIN EDIT

A sample solution is attached to the end of this post that shows how you can achieve this.

----

14 comments
ADMIN
Marin Bratanov
Posted on: 03 Mar 2021 06:51

Hello Phil,

The scenario you describe must be solved through the Skip parameter of the state for virtualized grids. In the common case, the row you want to scroll to will not be in the viewport and will not have data, so the grid can't get to it to scroll to it on its own, you need to tell it how far to scroll. If you want it in the middle of the viewport, subtracting a number from Skip is a valid approach.

For regular paging, if scrolling to the top won't suffice, I would suggest considering whether the page size is too large for a good UX. Perhaps virtual scrolling would then be a better alternative. Or, you could get the index of the desired row and use the .scrollIntoView JS method.

Moreover, a parameter means we'll have to re-render the entire grid as opposed to setting a DOM attribute, and that's not optimal.

So, I think that such a parameter would not be something we'll do. The row height is something the app knows, and browsers ignore CSS height set to rows if their content will wrap or if it is some complex template, and there are several other ways to solve this. Nevertheless, your comment is available in this thread and will be considered together with the other ideas.

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Philip
Posted on: 03 Mar 2021 01:53

@Marin I think your js fix/solution is great and could be even more "generic" and similar to the Telerik WPF scroll to position function by adding a variable for .scrollTop maybe?

So instead of;

gridPageContent.scrollTop = 0;

which would cater for the "top of page", the 0 could be a variable to cater for "scroll to position" scenarios.

And yes, would be great if it was in-built.

 

Attached is our current use case where you can see this functionality would be useful. This screen is to help in allowing the user to make adjustments to existing data which could span over many hours/days hence potentially alot of pagination/virtualised rows.

Currently we are using "skip" on GridState but that obviously skips to the value so you cannot easily see the number in context (and prior values are removed from the grid ui) - we have alleviated this by adding some extra rows above the skip;

                var skipValue = DeviceSensorAdjustmentGridData.Where(x => x.ReadingDate >= Convert.ToDateTime(DateFilter)).Count();
                var state = new GridState<VwSensorDataCalculated>()
                {
                    //have put some values (10) above the actual value (so you can see above and below selected)
                    Skip = skipValue - 10
                };
                await SensorGrid.SetState(state);

 

(feel free to comment if there is a better way)

Cheers
Phil

Attached Files:
René
Posted on: 17 Dec 2020 13:14

Perfect!  Thank you.

Fellow Developers - Please vote this up!

Regards,

René

ADMIN
Marin Bratanov
Posted on: 17 Dec 2020 10:07

Hello René,

Indeed, there is some interest in this, so I have reopened it.

By the way, people can Vote for items we have marked as "declined" too, and we can reconsider them.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

René
Posted on: 17 Dec 2020 08:07

Since the vote-count for this is going up I would ask you to change its status from Declined to Unplanned.  
My guess is that more people want this but not many stumble upon this ticket becaues most people probably ignore the declined tickets and therefore cannot vote for this.

Regards,

René

David
Posted on: 11 Dec 2020 15:33

Added my vote. I would also like to at least see an optional feature similar to what Chris suggested:

 PreserveScrollOnPageChange = true/false

 

 

ADMIN
Marin Bratanov
Posted on: 28 Jun 2020 12:00

Hi Chris,

That has been the way our grids have been expected to work by the majority of people, so that's how they are implemented at the moment.

For automatic scrolling to the top on paging to be considered for implementation, such a behavior needs to get enough traction with the community, and your Vote is the second one so far (I added it on your behalf). For the time being, please use the solution I posted above.

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Chris
Posted on: 26 Jun 2020 14:26

Really?  Why would anyone want the scroll to stay after a page flip? 

At least, this behavior should be configurable.  e.g. PreserveScrollOnPageChange = true/false/

If most customers really like the current behavior, then let the default be true.

René
Posted on: 06 Mar 2020 10:18
Most of our grids need the grouping feature so virtual scrolling is not an option.
ADMIN
Marin Bratanov
Posted on: 06 Mar 2020 10:17

Hello René,

Perhaps row virtualization can be a feature you will find useful, at least for some cases: https://docs.telerik.com/blazor-ui/components/grid/virtual-scrolling.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
René
Posted on: 06 Mar 2020 10:15

Hello Marin,

this is really strange.  What kind of user would read a book-page from line 1 to n then flip the page and go on reading line n of the next page ???

I cannot see a usecase where keeping the scrollbar at the same position as on the previous page would be useful.

We are only using paging because of limitations in number of DOM elements but our users always want to look at the rows from first to last.

It's a management decision I cannot understand but I guess I can (at least for now) live with the workaround you provided.

ADMIN
Marin Bratanov
Posted on: 06 Mar 2020 10:06

Hi René,

We reviewed this with management and what I can say is that - based on feedback from all our clients from all our web suites for the last decade - the majority of people (end users included) want the grid to keep the scrollTop when paging. This is how we have now implemented our grids and we do not intend to change this behavior because it will cause issues for many people. Thus, the solution I sent is valid - scrolling to the top with your own code on the PageChanged event.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
René
Posted on: 03 Mar 2020 09:46

Hello Marin,

thanks a lot for the code snippet!

ADMIN
Marin Bratanov
Posted on: 03 Mar 2020 09:43

Hi René,

All our grids keep the scroll position when paging and I haven't so far seen requests to change this behavior. Nevertheless, I am keeping this open to get more feedback on the community whether people want this behavior as a possible grid enhancement.

In the meantime, you can achieve it with just a little bit of JS Interop through the grid's PageChanged event:

 

@inject IJSRuntime JsInterop

<div id="myGridContainer">
    <TelerikGrid Data="@MyData" Pageable="true" PageSize="30" PageChanged="@PageChangedHandler" Height="300px">
        <GridColumns>
            <GridColumn Field="ID"></GridColumn>
            <GridColumn Field="TheName" Title="Employee Name"></GridColumn>
        </GridColumns>
    </TelerikGrid>
</div>
@code {
    async Task PageChangedHandler(int currPage)
    {
        await JsInterop.InvokeVoidAsync("scrollGridAfterPaging", "#myGridContainer");
    }

    public IEnumerable<object> MyData = Enumerable.Range(1, 150).Select(x => new { ID = x, TheName = "name " + x });
}

 

 

    <script>
        function scrollGridAfterPaging(gridParent) {
            var gridPageContent = document.querySelector(gridParent + " .k-grid-content");
            if (gridPageContent) {
                gridPageContent.scrollTop = 0;
            }
        }
    </script>

 

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor