-
Notifications
You must be signed in to change notification settings - Fork 24.7k
[11.0 P6] Docs for virtualize updates #37270
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
Open
ilonatommy
wants to merge
2
commits into
main
Choose a base branch
from
virtualize-updates
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -274,6 +274,50 @@ The <xref:Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize%601> com | |||||
|
|
||||||
| :::moniker-end | ||||||
|
|
||||||
| :::moniker range=">= aspnetcore-10.0" | ||||||
|
|
||||||
| ## Scroll to a specific item | ||||||
|
|
||||||
| The <xref:Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize%601> component provides two ways to control scroll position: `InitialItemIndex` for the first render and `ScrollToItemAsync` for programmatic scrolling after the component is rendered. | ||||||
|
|
||||||
| ### `InitialItemIndex` parameter | ||||||
|
|
||||||
| Set `InitialItemIndex` to open the list at a specific item index on first interactive render. This is a one-shot parameter—changes after first render are ignored. Out-of-range values are clamped. | ||||||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
|
||||||
| ```razor | ||||||
| <Virtualize Items="allFlights" Context="flight" InitialItemIndex="500"> | ||||||
| <FlightSummary @key="flight.FlightId" Details="@flight.Summary" /> | ||||||
| </Virtualize> | ||||||
| ``` | ||||||
|
|
||||||
| ### `ScrollToItemAsync` method | ||||||
|
|
||||||
| Call `ScrollToItemAsync` to programmatically scroll to an item after first render. The scroll is instant (no animation). The method returns a `Task` that completes when the target item is aligned to the top of the viewport. Cancellation is supported via `CancellationToken`. | ||||||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
|
||||||
| If multiple calls occur, the last call wins—earlier calls complete normally but only the final target is honored. If the user scrolls during a programmatic scroll, the user's scroll takes precedence. Calling before first interactive render throws an <xref:System.InvalidOperationException>. | ||||||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
|
||||||
| ```razor | ||||||
| <Virtualize Items="allFlights" Context="flight" @ref="virtualizeComponent"> | ||||||
| <FlightSummary @key="flight.FlightId" Details="@flight.Summary" /> | ||||||
| </Virtualize> | ||||||
|
|
||||||
| <button @onclick="ScrollToFlight">Go to flight 200</button> | ||||||
|
|
||||||
| @code { | ||||||
| private Virtualize<Flight>? virtualizeComponent; | ||||||
|
|
||||||
| private async Task ScrollToFlight() | ||||||
| { | ||||||
| if (virtualizeComponent is not null) | ||||||
| { | ||||||
| await virtualizeComponent.ScrollToItemAsync(200); | ||||||
| } | ||||||
| } | ||||||
| } | ||||||
| ``` | ||||||
|
|
||||||
| :::moniker-end | ||||||
|
|
||||||
| :::moniker range=">= aspnetcore-11.0" | ||||||
|
|
||||||
| ## Control viewport scroll position behavior when items are dynamically added | ||||||
|
|
@@ -283,20 +327,20 @@ The <xref:Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize%601> com | |||||
| Assign a `VirtualizeAnchorMode` value to the `AnchorMode` parameter to control how the viewport behaves at list edges when items are dynamically added: | ||||||
|
|
||||||
| * `None`: No edge pinning. The viewport stays at the current scroll position regardless of item changes. | ||||||
| * `Beginning`: Pins the viewport to the beginning of the list. When the user is at a scroll position near the top of the list and new items arrive at the beginning, the viewport stays at the top showing the newest items. For example, this pinning behavior is useful for a news feed user experience. | ||||||
| * `Start`: Pins the viewport to the start of the list. When the user is at a scroll position near the top of the list and new items arrive at the start, the viewport stays at the top showing the newest items. For example, this pinning behavior is useful for a news feed user experience. | ||||||
| * `End`: Pins the viewport to the end of the list. When the user is at a scroll position near the bottom of the list and new items arrive at the end, the viewport auto-scrolls to show them. If the user has scrolled away, auto-scroll disengages until they return to the bottom. For example, this pinning behavior is useful for a chat or logging user experience. | ||||||
|
|
||||||
| The following example pins the viewport to the beginning of a virtualized flight list: | ||||||
| The following example pins the viewport to the start of a virtualized flight list: | ||||||
|
|
||||||
| ```razor | ||||||
| <div style="height:500px;overflow-y:scroll"> | ||||||
| <Virtualize Items="allFlights" Context="flight" AnchorMode="Beginning"> | ||||||
| <Virtualize Items="allFlights" Context="flight" AnchorMode="Start"> | ||||||
| <FlightSummary @key="flight.FlightId" Details="@flight.Summary" /> | ||||||
| </Virtualize> | ||||||
| </div> | ||||||
| ``` | ||||||
|
|
||||||
| Modes can be combined. For example, assigning `Beginning | End` pins both edges. Combining `None` with other modes is supported but doesn't change the combined value. | ||||||
| Modes can be combined. For example, assigning `Start | End` pins both edges. Combining `None` with other modes is supported but doesn't change the combined value. | ||||||
|
|
||||||
| `Virtualize.ItemComparer` gets or sets a comparer used to detect whether items were prepended or appended when using class-typed items with an <xref:Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize%601.ItemsProvider%2A> (for more information, see the [Item provider delegate](#item-provider-delegate) section). | ||||||
|
|
||||||
|
|
@@ -307,7 +351,7 @@ The comparer determines if the first loaded item changed between provider calls, | |||||
| I thought that it wouldn't need it. --> | ||||||
|
|
||||||
| ```razor | ||||||
| <Virtualize ItemsProvider="LoadFlights" AnchorMode="Beginning" | ||||||
| <Virtualize ItemsProvider="LoadFlights" AnchorMode="Start" | ||||||
| ItemComparer="itemComparer"> | ||||||
| ... | ||||||
| </Virtualize> | ||||||
|
|
||||||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is for .NET 11, correct? Also, I'll include my "UPDATE 11.0" tracking comment for getting the API into place after GA.