Grid Paging - Scroll To Top

Radzen Studio Blazor Server
1

Is there a way to automatically scroll the contents of a grid to the top when paging?

2

Hi @superdave,

No, this isn't possible at the moment. You can however set the height of the DataGrid so a scroll never appears while you have paging:

<RadzenGrid Style="height: 500px">
</RadzenGrid>
3

Hey guys, you should really consider adding this. We currently have a paging size of 10 records, and our grid's height is dynamically set to match the available height of the viewport using height: calc(100% - 250px);

This offers a lot less scrolling for users who have larger monitors. It's a shame that they have to manually scroll back to top when paging. It is not the expected behavior.

I really don't want to set a small height for all users because then there is also a lot more clicking and not a great experience when there is all the space left wasted on larger monitors.

Thanks for your consideration :slight_smile:

1 Like
4

Figured it out using javascript.

Create a javascript function like so and it to your local js file or a script block in your host file:

function ScrollToTop() {
    try {
        console.log('ScrollToTop() rz-data-grid-data')
        var elem = document.getElementsByClassName("rz-data-grid-data")[0];
        elem.scrollTop = 0;
    }
    catch (ex) {
        console.log(ex);
    }
}

At the top of your component inject the IJSRuntime, like so:
@inject IJSRuntime _jsRuntime

Then at the bottom of your LoadData method in the component add a call to the javascript function, like so:

await _jsRuntime.InvokeVoidAsync("ScrollToTop");
2 Likes
5

@Julian_Dormon It is not working for me, what can I be missing ? The function is executed but my scroll is always at the bottom of my grid.

6

Try on this at CS Code:

await _jsRuntime.InvokeVoidAsync("eval", "document.getElementsByClassName("rz-data-grid-data")[0].scrollTop = 0;");

Works for me.

7

Thank you very much for the helpfull hint