Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add scroll into view to FluentDataGrid #2842

Open
markoweb2 opened this issue Oct 21, 2024 · 2 comments
Open

feat: add scroll into view to FluentDataGrid #2842

markoweb2 opened this issue Oct 21, 2024 · 2 comments
Labels
feature A new feature status:needs-investigation Needs additional investigation

Comments

@markoweb2
Copy link

🙋 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 FluentDataGrid would 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-github-policy-service microsoft-github-policy-service bot added the triage New issue. Needs to be looked at label Oct 21, 2024
@vnbaaij vnbaaij added feature A new feature status:needs-investigation Needs additional investigation and removed triage New issue. Needs to be looked at labels Oct 22, 2024
@vnbaaij
Copy link
Collaborator

vnbaaij commented Oct 22, 2024

Hi,

We've received this request from others as well. Jus have not gotten round to it yet and need to investigate if it is possible. Concern I have is around Virtualized grids.
It will most probably not work with grids that use a remote data source.

So, it is on the list but no concrete plans and no time to investigate yet.

@svrooij
Copy link
Contributor

svrooij commented Dec 3, 2024

Maybe we can start by allow setting the ID of each row?

<FluentDataGrid Items="@people" RowId="@(p => $"grid-row-{p.PersonId}")">
    <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
    <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
</FluentDataGrid>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature A new feature status:needs-investigation Needs additional investigation
Projects
None yet
Development

No branches or pull requests

3 participants