DxDataGrid<T>.Data Property

Specifies the data source.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

[Parameter]
public IEnumerable<T> Data { get; set; }

Property Value

Type Description
IEnumerable<T>

A data source.

Remarks

The Data property allows you to bind the Data Grid to an IEnumerable<T> data source.

NOTE

The Data Grid operates in bound mode only. Unbound mode is not supported.

@if (DataSource == null) {
    <div>Loading...</div>
} else {
    <DxDataGrid Data="@DataSource">
        <DxDataGridDateEditColumn Field=@nameof(WeatherForecast.Date) />
        <DxDataGridColumn Field=@nameof(WeatherForecast.TemperatureC) Caption="Temp. (C)" />
        <DxDataGridSpinEditColumn Field=@nameof(WeatherForecast.TemperatureF) Caption="Temp. (F)" />
    </DxDataGrid>
}

@code {
    IEnumerable<WeatherForecast> DataSource;

    public class WeatherForecast {
        public DateTime Date { get; set; }
        public int TemperatureC { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }

    protected override void OnInitialized() {
        DataSource = GetForecast();
    }

    public IEnumerable<WeatherForecast> GetForecast() {
        var rng = new Random();
        DateTime startDate = DateTime.Now;
        for (var i = 1; i < 15; i++) {
            yield return new WeatherForecast { Date = startDate.AddDays(i), 
                                               TemperatureC = rng.Next(-15, 20) };
        }
    }
}

Data Grid Data Result

If you run an asynchronous task to load data during page initialization, use the DataAsync property instead. See Bind to Data Asynchronously for more information.

To bind the grid to any data source type and/or specify data load options, use the CustomData property.

Online Demos

Data Grid - Large Data Source

Data Grid - Remote Data Source

Implements

DevExpress.Blazor.Internal.IDataSourceSettings<T>.Data
See Also