Hi Víctor,

The behavior was updated in UI for Blazor 4.2.0. Currently, when the user changes the page, the Grid scrolls to top. This is the behavior I am experiencing when testing with the current latest version (4.3.0): https://blazorrepl.telerik.com/GxkBEpva46iGjwYV56.

In order to use this enhancement, you should upgrade to at least 4.2.0. If you are using this version or the current latest, but you are hitting different behavior, please modify the sample I sent to reproduce it, so we can revise it.

Regards,
Nadezhda Tacheva
Progress Telerik

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

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

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

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

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

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