DxGrid.Data Property

Specifies an object that supplies Grid data.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(null)]
[Parameter]
public object Data { get; set; }

Property Value

Type	Default	Description
Object	null	Supplies Grid data.

Remarks

Bind Grid to Data

Use the Data parameter to bind the Grid to data. To display data within the Grid, declare DxGridDataColumn objects in the Columns template and use each object’s FieldName property to assign data fields.

Note

Note that the FieldName property value must be unique for each data column.

In the following code snippet, the Grid is bound to a data collection available during synchronous component initialization:

1. Bind the Data parameter to a C# field or property.
2. Populate this field or property with data in the OnInitialized lifecycle method.

Razor

@inject WeatherForecastService ForecastService

<DxGrid Data="@Data">
    <Columns>
        <DxGridDataColumn FieldName="Date" DisplayFormat="D" />
        <DxGridDataColumn FieldName="TemperatureC" Caption="@("Temp. (\x2103)")" Width="120px" />
        <DxGridDataColumn FieldName="TemperatureF" Caption="@("Temp. (\x2109)")" Width="120px" />
        <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, 15).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>();

Read Tutorial Run Demo: Grid - Data Binding View Example: Bind the Grid to a DataTable object

Reload Data

The Grid component automatically reloads data in the following cases:

Observable Data Collections

You can bind the Grid to a data collection that implements the INotifyCollectionChanged or IBindingList interface. These collections notify the Grid about changes and cause automatic updates. For more information, refer to the following help topic: Observable Data Collections.

Data Instance Change

If you change an instance of a field/property bound to the Data parameter, the Grid reloads its data in response to this change. You can use this technique if you post updates to the underlying service (such as DbContext EF Core).

Editing-Related Events

You can allow users to edit Grid data. To process user input and save changes, handle EditModelSaving and DataItemDeleting events. The Grid reloads its data after the corresponding event handler is executed. For more information, refer to the following help topic: Editing and Validation in Blazor Grid.

In other cases, call the Reload() method after the Grid’s bound data source is changed. The method gets updated data from the source and applies changes to the Grid.

Implements

Data