RadzenDataGrid Pagination - Scroll to top

Radzen.Blazor Components
1

Hi,

I have set up a radzendatagrid with 800 records and page size of 100 per page.

When I scroll to the bottom to go to the next page I want to fire some js code to scroll to the top of the page since there doesn’t seem to be any built in method supporting this?

At the moment when you go to the next page the user has to manually scroll back up to the top to see the data of the next page.

Is there a method I can call onpage or something similar to trigger my js code whenever the next / previous / first / last page buttons are clicked on to automatically scroll back up to the top of the page?

2

RadzenDataGrid exposes a Page event callback (EventCallback<PagerEventArgs>) that fires whenever the user changes the page. You can use it to invoke a small JS snippet that scrolls back to the top.

1. Add a JS function (e.g. in wwwroot/js/site.js or in a <script> block):

window.scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });

2. Inject IJSRuntime and wire up the Page event:

@inject IJSRuntime JS

<RadzenDataGrid Data="@data" TItem="Order"
                AllowPaging="true" PageSize="100"
                Page="@OnPage">
    @* columns *@
</RadzenDataGrid>

@code {
    async Task OnPage(PagerEventArgs args)
    {
        await JS.InvokeVoidAsync("scrollToTop");
    }
}

That’s it — every time the user clicks next/previous/first/last or picks a page number, OnPage fires and smoothly scrolls the viewport to the top.

Tip: If you want to scroll to the grid element itself rather than the very top of the page (useful when the grid isn’t at the top), give it an id and use document.getElementById('myGrid').scrollIntoView({ behavior: 'smooth' }) instead.

Hope this helps!