DxListEditorBase<TData, TValue>.ListRenderMode Property
Specifies how the list editor renders its items.
Namespace: DevExpress.Blazor.Base
Assembly: DevExpress.Blazor.v24.2.dll
NuGet Package: DevExpress.Blazor
#Declaration
[Parameter]
public ListRenderMode ListRenderMode { get; set; }#Property Value
| Type | Description |
|---|---|
| List |
A List |
Available values:
| Name | Description |
|---|---|
| Entire | The editor renders the entire item list. Use this option for small item lists where scrolling should be instant. |
| Virtual | The editor renders list items only after they appear in the viewport. This approach improves performance when the list contains many items. |
#Remarks
For large datasets (thousands of items), ListRenderMode.Entire can significantly degrade user interface performance or even prevent the page from being rendered.
Set the ListRenderMode property to ListRenderMode.Virtual to render only rows visible within the list editor’s (ComboBox, List Box, TagBox) viewport. This rendering mode also adds a buffer of rows above and below the viewport to ensure smooth scrolling. The size of this buffer is approximately twice the number of visible rows, though the exact count can vary based on the bound data source and editor layout. Rows are automatically loaded into the viewport as you scroll, which keeps the user interface responsive regardless of the total number of rows in the source data. The list editor also displays a vertical scrollbar that allows users to navigate data, in addition to using the mouse wheel, keyboard, or other methods.
If you bind the editor to custom data, the editor requests data in small chunks as the user scrolls beyond the buffered item range. The function assigned to the CustomData property is invoked each time the scroll position moves past the buffered items.
Note
If the total number of list items is less than or equal to the number of visible rows plus the buffer size, the entire list is rendered, regardless of the specified List.
Since all items are already loaded, the function assigned to the Custom property will not be invoked during scrolling.
The following code snippet enables virtual render mode for the List Box component:
<DxListBox Data="@Data"
ListRenderMode="ListRenderMode.Virtual"
TData="Country"
TValue="Country" />
@code {
IEnumerable<Country> Data { get; set; }
protected override async Task OnInitializedAsync() {
Data = await WorldcitiesDataService.GetCountriesAsync();
}
}