RadzenGrid (Blazor) scroll to row

How to navigate to a table row to make it visible? in js exist element.scrollIntoView(scrollIntoViewOptions); but how find element by index or item of data list? Technically, this issue is being solved, but it seems too difficult. Is there an easy way?

There is no built-in API for scrolling to a particular row or finding an element by data item.

some solution:

javascript
function radzen_grid_scroll_to_item(index) {
    if (index % 2 == 0) 
        var element_class = "rz-datatable-even";
    else
        var element_class = "rz-datatable-odd";
    var element = document.getElementsByClassName(element_class)[index/2];
    if (element) element.scrollIntoView({ block: "center" });
}
C#
JS.InvokeVoidAsync("radzen_grid_scroll_to_item", index);

made small corrections

Hello, the JS code above has some issues, please find attached a revised version:

window.radzen_grid_scroll_to_item = (count, root_element_id = undefined) => {
    if (count % 2 == 0)
        var element_class = "rz-datatable-odd";
    else
        var element_class = "rz-datatable-even";

    if (root_element_id === undefined)
        var root_element = document;
    else
        var root_element = document.getElementById(root_element_id);

    const row_elements = root_element.getElementsByClassName(element_class);
    const element = row_elements[row_elements.length - 1];
    if (element) element.scrollIntoView({ block: "center" });
}
1 Like

On second thought, I think I misunderstood vadim_b's code und used it incorrectly. Instead of scrolling to a specified item, the task I was trying to solve was to scroll to the last item in the datagrid after populating it with data.

Is there any plan to add an API for scrolling to a row to the Blazor DataGrid control? If not, does anyone have a recommendation for how to best accomplish this?

One of the issues we're running into is that because of virtualization, calls to JS methods to get elements that are offscreen are not working. As a workaround we're using the height of each row and the index of the row we want to scroll to in order to calculate the desired scroll position, but this involves even more work.

When you use virtualization, you don't have a physical element to scroll to. Try to load a batch of data with your record and then use the solution above.