search

dotnet / aspnetcore

ASP.NET Core is a cross-platform .NET framework for building modern cloud-based web applications on Windows, Mac, or Linux.
https://asp.net
MIT License
35.46k stars 10.03k forks source link

Virtualize component Row Index Enhancements (API to scroll to item) #26943

Open bancroftway opened 4 years ago

bancroftway commented 4 years ago

In our Blazor Wasm project, we have a Virtualize component bound to a long list of items, using ItemsProvider. We have a need to scroll to a particular row when user clicks on a item in Table of Contents, which is outside of the Virtualize component.

Using the ItemsProvider, is there a suggested workaround to bring a particular row index into view, when inside a Virtualize component?

This issue covers:

ghost commented 4 years ago

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

legistek commented 3 years ago

Absolutely essential IMO. Think about it from the perspective of a real world application; if you're presenting so much data to a user that virtualization is necessary, then surely the user will want a way to navigate to specific rows other than the scrollbar (which of course becomes less and less precise the more data there is!)

Relatedly, why did you have to seal[] VirtualizationComponent? My first thought was to sub-class it and add this functionality myself, but as it is I'm going to have to copy and paste the source from the repo and more or less fork it. Not ideal. Please take a page from WPF and make Blazor more extensible when possible; this is a perfect example. Thanks!

gopalawasthi123 commented 3 years ago

I have a query. Suppose I have a list of employees which is inside the Virtualize Component. And we have another list of departments which contains one employee. On the click of the particular employee from department. Is it possible to scroll down to the list of the employees(i.e inside Virtualize Component ) and select that particular item and highlight it???

SteveSandersonMS commented 3 years ago

As part of doing this, we should make it easier to set an initial scroll index so you don't have to wait until after the first render to scroll there.

legistek commented 3 years ago

Can I make a related suggestion that you change the way the actual scrolling element is determined? Per this issue I raised awhile back (which somehow got closed prematurely), it's very easy to break the component if it doesn't find an element in its parent tree with the styles it's expecting. I would either force the developer to provide an ElementReference of the element he wants to be the scroller, or if that's not feasible identify it with a unique class or attribute.

That would more or less resolve this issue on its own, since we could then just set the yoffset on the scroller element through Javascript.

qin-guan commented 3 years ago

Are there plans to move this out of backlog?

amartens181 commented 3 years ago

I'll be manually scrolling with JS until this is implemented.

GioviQ commented 3 years ago

When I change a filter of my query, I call RefreshDataAsync(), but I would like also to scroll to top (StartIndex=0), because it is a new set of data.

MithrilMan commented 3 years ago

I add my voice here, for any serious usage of Virtualize, being able to "ensure an item is visible" (aka scroll to index) is quite a mandatory feature needed.

SteveSandersonMS commented 3 years ago

In case it helps, I have a sample app that does this via code here and here.

TanayParikh commented 3 years ago

Closed out https://github.com/dotnet/aspnetcore/issues/31835 / https://github.com/dotnet/aspnetcore/issues/30561 as they are requesting access to index, index based event handling. Using this issue to track that effort with virtualization.

ghost commented 3 years ago

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

Grandizer commented 2 years ago

@SteveSandersonMS - I am not sure how this would work seeing that the calendarElement id you are attempting to jump to most likely would not even exist in html. I have tried to even call await RowsLoader(new ItemsProviderRequest(foundIndex, 50, new CancellationToken())); to hopefully load the data in the Virtualize component and also did an await RowsVirtualizer.RefreshDataAsync(); but it never seems to update the html and thus I cannot scroll to it.

@Microsoft @mkArtakMSFT - This seems like a common thing anyone using the awesome Virtualize component would do. So many records, it just makes sense to easily get to parts of the list. Please make this work!

SteveSandersonMS commented 2 years ago

I am not sure how this would work seeing that the calendarElement id you are attempting to jump to most likely would not even exist in html

@Grandizer I'm confused because (1) I'm not sure what "calendarElement id" you are referring to, and (2) the example code linked above does work. The example code shows how to scroll to a particular location by row index. Perhaps you're trying to achieve something different.

Grandizer commented 2 years ago

I'm confused because (1) I'm not sure what "calendarElement id" you are referring to

@SteveSandersonMS I am referring to the like you provided here.

The code, here, would work, but only if that calendarElement exists in HTML. If you have not scrolled near enough for the Virtualize component to render that row, that elem you are trying to scroll to does not yet exist.

SteveSandersonMS commented 2 years ago

@Grandizer It does work regardless of your scroll position, because what that code does is to move the scrollbar to the specified position, which in turn then causes the virtualize component to load and render the corresponding items.

Grandizer commented 2 years ago

@SteveSandersonMS Understood. I will check it out again. Sounds like what I need! Thank you.

ghost commented 2 years ago

Thanks for contacting us.

We're moving this issue to the .NET 8 Planning milestone for future evaluation / consideration. We would like to keep this around to collect more feedback, which can help us with prioritizing this work. We will re-evaluate this issue, during our next planning meeting(s). If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

ghost commented 1 year ago

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

ghost commented 10 months ago

Thanks for contacting us.

We're moving this issue to the .NET 9 Planning milestone for future evaluation / consideration. We would like to keep this around to collect more feedback, which can help us with prioritizing this work. We will re-evaluate this issue, during our next planning meeting(s). If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.