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.