DataProperty.razor

@page "/DataProperty"
@inject WeatherForecastService WeatherForecastService

<h2>Data Property</h2>

<p>
    This example uses the <a class="helplink" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.Data" target="_blank">Data</a> property to bind the Data Grid to a strongly typed collection. An asynchronous task initializes this collection in the <a class="helplink" href="https://docs.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle#component-initialization-methods" target="_blank">OnInitializedAsync</a> lifecycle method. Note that the <b>Render GUID</b> changes during page initialization. This means that the page is rendered twice: before the task is completed (field values are not initialized) and after the task is completed (the task initialized field values).
</p>

<p>
    <b>Render GUID</b>: @Guid.NewGuid()
</p>

<p>
    To prevent excessive re-rendering for Data Grid pages, use the <a class="helplink" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.DataAsync" target="_blank">DataAsync</a> property demonstrated on the remaining pages.
</p>

@if (DataSource != null) {
    <DxDataGrid Data="@DataSource">
        <Columns>
            <DxDataGridColumn Field="@nameof(WeatherForecast.Summary)" />
            <DxDataGridDateEditColumn Field="@nameof(WeatherForecast.Date)" />
            <DxDataGridSpinEditColumn Field="@nameof(WeatherForecast.TemperatureC)" />
            <DxDataGridSpinEditColumn Field="@nameof(WeatherForecast.TemperatureF)" />
        </Columns>
        @*...*@
    </DxDataGrid>
}
@code { 
    WeatherForecast[] DataSource;

    protected override async Task OnInitializedAsync() {
        DataSource = await WeatherForecastService.GetForecastAsync(DateTime.Now.Date);
    } 
}