DxComboBoxSettings.ListRenderMode Property

Specifies whether virtual scrolling is enabled in the combo box editor.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(ListRenderMode.Entire)]
[Parameter]
public ListRenderMode ListRenderMode { get; set; }

Property Value

Type	Default	Description
ListRenderMode	Entire	An enumeration value.

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

In virtual scrolling mode, the combo box editor renders items in the drop-down list only after they appear in the viewport. Enable this mode when the combo box contains a large number of items to improve editor performance.

Note

When the combo box editor is in virtual scrolling mode, drop-down list width can change while the user scrolls the list up or down.

The following code snippet enables the virtual scrolling mode in a combo box editor:

Razor

@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory

<DxGrid Data="Orders"
        EditMode="GridEditMode.EditRow">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="EmployeeId" Caption="Employee" Width="20%">
            <EditSettings>
                <DxComboBoxSettings Data="Employees"
                                    TextFieldName="LastName"
                                    ValueFieldName="EmployeeId"
                                    ListRenderMode="ListRenderMode.Virtual" >
                </DxComboBoxSettings>
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="ShippedDate" />
        <DxGridDataColumn FieldName="ShipCountry" />
        <DxGridDataColumn FieldName="ShipCity" />
        <DxGridDataColumn FieldName="ShipName" Width="20%" />
    </Columns>
</DxGrid>

@code {
    NorthwindContext Northwind { get; set; }
    List<Order> Orders { get; set; }
    List<Employee> Employees { get; set; }

    protected override async Task OnInitializedAsync() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        Orders = await Northwind.Orders.ToListAsync();
        Employees = await Northwind.Employees.ToListAsync();
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

NorthwindContext

using Microsoft.EntityFrameworkCore;
#nullable disable

namespace Grid.Northwind {
    public partial class NorthwindContext : DbContext {

        public NorthwindContext(DbContextOptions<NorthwindContext> options)
            : base(options) {
        }
        // ...
        public virtual DbSet<Order> Orders { get; set; }
        public virtual DbSet<Employee> Employees { get; set; }
        // ...
        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) {
            if(!optionsBuilder.IsConfigured) {
                optionsBuilder.UseSqlServer("Server=.\\sqlexpress;Database=Northwind;Integrated Security=true");
            }
        }

        protected override void OnModelCreating(ModelBuilder modelBuilder) {
            modelBuilder.HasAnnotation("Relational:Collation", "SQL_Latin1_General_CP1_CI_AS");
            // ...
            modelBuilder.Entity<Order>(entity => {
                entity.HasIndex(e => e.CustomerId, "CustomerID");
                entity.HasIndex(e => e.CustomerId, "CustomersOrders");
                entity.HasIndex(e => e.EmployeeId, "EmployeeID");
                entity.HasIndex(e => e.EmployeeId, "EmployeesOrders");
                entity.HasIndex(e => e.OrderDate, "OrderDate");
                entity.HasIndex(e => e.ShipPostalCode, "ShipPostalCode");
                entity.HasIndex(e => e.ShippedDate, "ShippedDate");
                entity.HasIndex(e => e.ShipVia, "ShippersOrders");
                entity.Property(e => e.OrderId).HasColumnName("OrderID");
                entity.Property(e => e.CustomerId)
                    .HasMaxLength(5)
                    .HasColumnName("CustomerID")
                    .IsFixedLength(true);
                entity.Property(e => e.EmployeeId).HasColumnName("EmployeeID");
                entity.Property(e => e.Freight)
                    .HasColumnType("money")
                    .HasDefaultValueSql("((0))");
                entity.Property(e => e.OrderDate).HasColumnType("datetime");
                entity.Property(e => e.RequiredDate).HasColumnType("datetime");
                entity.Property(e => e.ShipAddress).HasMaxLength(60);
                entity.Property(e => e.ShipCity).HasMaxLength(15);
                entity.Property(e => e.ShipCountry).HasMaxLength(15);
                entity.Property(e => e.ShipName).HasMaxLength(40);
                entity.Property(e => e.ShipPostalCode).HasMaxLength(10);
                entity.Property(e => e.ShipRegion).HasMaxLength(15);
                entity.Property(e => e.ShippedDate).HasColumnType("datetime");
            });
            modelBuilder.Entity<Employee>(entity => {
                entity.HasIndex(e => e.EmployeeId, "EmployeeId");
                entity.HasIndex(e => e.LastName, "LastName");
                entity.HasIndex(e => e.FirstName, "FirstName");
                entity.HasIndex(e => e.Title, "Title");
                entity.HasIndex(e => e.BirthDate, "BirthDate");
                entity.HasIndex(e => e.HireDate, "HireDate");
                entity.HasIndex(e => e.Notes, "Notes");
            });
            // ...
            OnModelCreatingPartial(modelBuilder);
        }

        partial void OnModelCreatingPartial(ModelBuilder modelBuilder);
    }
}

Order.cs

public partial class Order {
    public Order() {
        OrderDetails = new HashSet<OrderDetail>();
    }

    public int OrderId { get; set; }
    public string CustomerId { get; set; }
    public int? EmployeeId { get; set; }
    public DateTime? OrderDate { get; set; }
    public DateTime? RequiredDate { get; set; }
    public DateTime? ShippedDate { get; set; }
    public int? ShipVia { get; set; }
    public decimal? Freight { get; set; }
    public string ShipName { get; set; }
    public string ShipAddress { get; set; }
    public string ShipCity { get; set; }
    public string ShipRegion { get; set; }
    public string ShipPostalCode { get; set; }
    public string ShipCountry { get; set; }
}

Employee.cs

public partial class Employee {
    public int EmployeeId { get; set; }
    public string LastName { get; set; }
    public string FirstName { get; set; }
    public string Title { get; set; }
    public string TitleOfCourtesy { get; set; }
    public Nullable<System.DateTime> BirthDate { get; set; }
    public Nullable<System.DateTime> HireDate { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public string Region { get; set; }
    public string PostalCode { get; set; }
    public string Country { get; set; }
    public string HomePhone { get; set; }
    public string Extension { get; set; }
    public byte[] Photo { get; set; }
    public string Notes { get; set; }
    public Nullable<int> ReportsTo { get; set; }
    public string PhotoPath { get; set; }
    public virtual ICollection<Order> Orders { get; set; }
    public string Text => $"{FirstName} {LastName} ({Title})";
    public string ImageFileName => $"Employees/{EmployeeId}.jpg";
}

To enable or disable the virtual scrolling mode in the combo box at runtime, use the IComboBoxSettings.ListRenderMode property.

Implements

ListRenderMode