Set vertical scroll position in grid

Radzen Studio Blazor WebAssembly
1

Hello, I have a grid with a button in each row that when I click it shows me the detail of that row on another page, when I return I would like to find the grid in the position of the vertical scrool where it was previously

2

Hi @Jony_montana,

For the time being there isn't any API that gets / sets the current scroll position. You can probably use the built-in DOM API for that - namely scrollTop.

3

While there isn't a direct API for setting scroll position, I've implemented a reliable solution using JavaScript interop after I required such a feature today. Here's a complete solution that works with current datagrids:

  1. Create a JavaScript file (e.g. dataGridScroller.js) and place it in the js folder of your wwwroot:
window.scrollGridToBottom = function (gridId) {
    const grid = document.getElementById(gridId);
    if (grid) {
        const scrollableBody = grid.querySelector('.rz-data-grid-data');
        if (scrollableBody) {
            scrollableBody.scrollTop = scrollableBody.scrollHeight;
        }
    }
}
  1. Add a helper method in your Blazor component:
private async Task ScrollGridToBottom(string gridId)
{
    // Small delay to ensure grid has updated
    await Task.Delay(100); 
    await JSRuntime.InvokeVoidAsync("scrollGridToBottom", gridId);
}
  1. Use it in your component after grid operations:
if (response is not null)
{
    YourCollection.Add(response);
    await dataGrid.Reload();
    await ScrollGridToBottom("your-grid-id");
}

  1. Make sure to add an id to your Radzen datagrid:
    <RadzenDataGrid id="your-grid-id" ... >

  2. Ensure you add the JavaScript file reference to your App.razor file:
    <script src="/js/dataGridScroller.js"></script>