DxGrid.VirtualScrollingEnabled Property

Specifies whether vertical virtual scrolling is enabled.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(false)]
[Parameter]
public bool VirtualScrollingEnabled { get; set; }

Property Value

Type	Default	Description
Boolean	false	true to enable vertical virtual scrolling; otherwise, false.

Remarks

Set the Grid component’s VirtualScrollingEnabled property to true to enable vertical virtual scrolling. In this mode, the PageSize property has no effect and all data rows are on one page. The Grid hides the pager and displays the vertical scrollbar that allows users to navigate through data.

When vertical virtual scrolling is enabled, the Grid renders all rows that are in the viewport and several rows above and below that viewport. The additional row count depends on the bound data source and grid layout. If you bind the Grid component to a Server Mode data source, the component requests data in small chunks as the user scrolls up or down.

Run Demo: Virtual Scrolling

Set the Grid’s TextWrapEnabled property to false to disable word wrap in Grid cells and ensure all rows have the same height. This allows the Grid to perform less calculations and creates improved scrolling performance.

Note

Vertical virtual scrolling mode is not compatible with the keyboard navigation feature and EditCell edit mode.

Vertical virtual scrolling mode affects appearance and behavior of the Select All checkbox. Refer to the following topic for more information: SelectAllCheckboxMode.

The following example demonstrates how to enable vertical virtual scrolling mode:

Razor

@inject WeatherForecastService ForecastService

<style>
    .my-grid {
        height: 400px;
    }
</style>

<DxGrid Data="@Data" CssClass="my-grid" VirtualScrollingEnabled="true">
    <Columns>
        <DxGridDataColumn FieldName="Date" />
        <DxGridDataColumn FieldName="TemperatureC"/>
        <DxGridDataColumn FieldName="Forecast" />
        <DxGridDataColumn FieldName="CloudCover" />
    </Columns>
</DxGrid>

@code {
    object Data { get; set; }

    protected override void OnInitialized() {
        Data = ForecastService.GetForecast();
    }
}

WeatherForecast

using System;

public class WeatherForecast {
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public double TemperatureF => Math.Round((TemperatureC * 1.8 + 32), 2);
    public string Forecast { get; set; }
    public string CloudCover { get; set; }
    public bool Precipitation { get; set; }
}

WeatherForecastService

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading;
    using System.Threading.Tasks;

    public class WeatherForecastService {
        private List<WeatherForecast> Forecast { get; set; }

        private static string[] CloudCover = new[] {
            "Sunny", "Partly cloudy", "Cloudy", "Storm"
        };

        Tuple<int, string>[] ConditionsForForecast = new Tuple<int, string>[] {
            Tuple.Create( 22 , "Hot"),
            Tuple.Create( 13 , "Warm"),
            Tuple.Create( 0 , "Cold"),
            Tuple.Create( -10 , "Freezing")
        };

        public WeatherForecastService() {
            Forecast = CreateForecast();
        }

        private List<WeatherForecast> CreateForecast() {
            var rng = new Random();
            DateTime startDate = DateTime.Now;
            return Enumerable.Range(1, 1500).Select(index => {
                var temperatureC = rng.Next(-10, 30);
                return new WeatherForecast {
                    Date = startDate.AddDays(index),               
                    TemperatureC = temperatureC,
                    CloudCover = CloudCover[rng.Next(0, 4)],
                    Precipitation = Convert.ToBoolean(rng.Next(0, 2)),
                    Forecast = ConditionsForForecast.First(c => c.Item1 <= temperatureC).Item2
                };
            }).ToList();
        }

        public IEnumerable<WeatherForecast> GetForecast() {
            return Forecast.ToArray();
        }
        // ...
}

Program.cs

// ...
builder.Services.AddSingleton<WeatherForecastService>();

To scroll the Grid to a specific row, call the MakeRowVisible or MakeDataItemVisibleAsync method.

Implements

VirtualScrollingEnabled