🙋 Feature Request

I would like a ScrollIntoView() method for FluentDataGrid, if such a thing is doable.

🤔 Expected Behavior

Let's say the Items property is a List<SomeClass>. I should be able to pass in a SomeClass item/object as a parameter to ScrollIntoView() and then the item is brought into view.

😯 Current Behavior

No such method exists. User has to scroll (potentially) thousands of records to find the correct item.

💁 Possible Solution

Ideally the method signature would be something like this: public void ScrollIntoView(T item, int columnIndex = 0, bool scrollIntoCenter = true)

It's helpful to scroll both axies, thus good if you can provide the column that needs to be brought into view as well. It's good to scroll the item into the center screen by default. Helps the user to visually find it faster.

When using a FluentDialog panel, I had to resort to JavaScript for the scroll functionality:

        function ScrollIntoView(element) {
            if (!element) return;
            else element.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
        }

I could then pass in a reference to a Name FluentTextField for example, that had validation errors. But this approach does not work with FluentDataGrid, because the tabel is dynamically generated via the Items property and I don't have references to the matching <fluent-data-grid-row>.

Perhaps the JavaScript method approach would work, if FluentDataGridwould offer a converter method, eg: public FluentDataGridRow ConvertItemToGridRow(T item)

🔦 Context

Let's say the DataGrid contains 1000 items. User modifies a couple of rows. While saving, my validation finds some errors. I would like to scroll the first row with an error into view.

💻 Examples

You can look into WPF DataGrid for example. Although it does not offer a scroll to center functionality.

microsoft / fluentui-blazor

feat: add scroll into view to FluentDataGrid #2842