DxDataGrid<T>.Data Property

Specifies a strongly typed collection that supplies grid data.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

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

Property Value

Type Description
IEnumerable<T>

A data collection.

Remarks

Use the Data property to bind the Data Grid to a strongly typed collection. Initialize this collection in the OnInitialized lifecycle method or before this method is invoked. To display data within the Data Grid, add columns to the markup and use the Field property to assign data fields.

<DxDataGrid Data="@DataSource" PageSize="5">
    <DxDataGridDateEditColumn Field="Date" DisplayFormat="D" />
    <DxDataGridColumn Field="Forecast" />
    <DxDataGridColumn Field="CloudCover" />
    <DxDataGridSpinEditColumn Field="TemperatureC"
                              Caption="@("Temp. (\x2103)")"
                              TextAlignment="@DataGridTextAlign.Left"
                              Width="150px" />
    <DxDataGridSpinEditColumn Field="TemperatureF"
                              Caption="@("Temp. (\x2109)")"
                              TextAlignment="@DataGridTextAlign.Left"
                              Width="150px" />
</DxDataGrid>

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

    IEnumerable<WeatherForecast> DataSource = Enumerable.Empty<WeatherForecast>();
    protected override void OnInitialized() {
        DataSource = ForecastService.GetForecast();
    }
}

Data Grid Data Result

The grid can detect IQueryable<T> collections and use benefits of the corresponding LINQ query providers (such as Entity Framework).

Use the DataAsync property instead of the Data property if a strongly typed collection is loaded asynchronously. Use the CustomData property if your data is stored on a remote service and is loaded through a Web API.

Run Demo: Data Grid - Data Binding Run Demo: Data Grid - Large Datasets

Note

When users edit data, select data rows, or expand detail rows in master-detail layouts, the Data Grid should be able to identify individual data items. To specify the key data field, use one of the ways described in the KeyFieldName property.

See Also