Declined
Last Updated: 28 Jun 2020 12:00 by ADMIN
René
Created on: 03 Mar 2020 07:16
Category: Grid
Type: Feature Request
5
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 ???

8 comments
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