DxGrid.Data Property

Specifies an object that supplies Grid data.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[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:

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

Razor
WeatherForecast
WeatherForecastService
Program.cs

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();
    }
}

csharp

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; }
}

csharp

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();
        }
        // ...
}

csharp

// ...
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 CollectionsYou 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 additional information, refer to the following help topic: Observable Data Collections.Data Instance ChangeIf 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 EventsYou 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 additional 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