Index.razor

@page "/"

@using BlazorGridInlineEditing.Data
@inject WeatherForecastService ForecastService

@if (forecasts == null) {
    <p><em>Loading...</em></p>
}
else {
    <DxDataGrid Data="@forecasts" PageSize="5" @ref="grid"
                SelectionMode="DataGridSelectionMode.None">
        <Columns>
            <DxDataGridCommandColumn Width="150px">
                <CellTemplate>
                    @{
                        WeatherForecastForEdit currentObj = (WeatherForecastForEdit)context;
                        if (currentObj.IsInEditMode) {
                            <DxButton Text="Save" RenderStyle="ButtonRenderStyle.Link"
                                      Click="@(async (e) => await StopEditingAsync(currentObj, true))"></DxButton>
                            <DxButton Text="Cancel" RenderStyle="ButtonRenderStyle.Link"
                                      Click="@(async (e) => await StopEditingAsync(currentObj, false))"></DxButton>
                        }
                        else {
                            <DxButton Text="Edit" RenderStyle="ButtonRenderStyle.Link"
                                      Click="@((e) => currentObj.IsInEditMode = true)"></DxButton>
                        }
                    }
                </CellTemplate>
            </DxDataGridCommandColumn>
            <DxDataGridDateEditColumn Field="Date">
                <DisplayTemplate>
                    @{
                        WeatherForecastForEdit currentObj = (WeatherForecastForEdit)context;
                        if (currentObj.IsInEditMode) {
                            <DxDateEdit @bind-Date="currentObj.Date"></DxDateEdit>
                        }
                        else {
                            <div>@currentObj.Date.ToShortDateString()</div>
                        }
                    }
                </DisplayTemplate>
            </DxDataGridDateEditColumn>
            <DxDataGridColumn Field="Summary">
                <DisplayTemplate>
                    @{
                        WeatherForecastForEdit currentObj = (WeatherForecastForEdit)context;
                        if (currentObj.IsInEditMode) {
                            <DxTextBox @bind-Text="currentObj.Summary" BindValueMode="BindValueMode.OnInput"></DxTextBox>
                        }
                        else {
                            <div>@currentObj.Summary</div>
                        }
                    }
                </DisplayTemplate>
            </DxDataGridColumn>
            <DxDataGridSpinEditColumn Caption="Temperature" Field="TemperatureC" TextAlignment="DataGridTextAlign.Left">
                <DisplayTemplate>
                    @{
                        WeatherForecastForEdit currentObj = (WeatherForecastForEdit)context;
                        if (currentObj.IsInEditMode) {
                            <DxSpinEdit @bind-Value="currentObj.TemperatureC" BindValueMode="BindValueMode.OnInput"></DxSpinEdit>
                        }
                        else {
                            <div>@(currentObj.TemperatureC.ToString() + " C")</div>
                        }
                    }
                </DisplayTemplate>
            </DxDataGridSpinEditColumn>
        </Columns>
    </DxDataGrid>
}
@code {
    private List<WeatherForecastForEdit> forecasts = new List<WeatherForecastForEdit>();
    DxDataGrid<WeatherForecastForEdit> grid;
    protected override async Task OnInitializedAsync() {
        var fromService = await ForecastService.GetForecastAsync();
        UpdateDataSource(fromService);
    }
    protected async Task StopEditingAsync(WeatherForecastForEdit item, bool shouldBeSaved) {
        var newDataSource = shouldBeSaved ? await ForecastService.UpdateChanges(item, item.ID) : await ForecastService.GetForecastAsync();
        UpdateDataSource(newDataSource);
        if (!shouldBeSaved) {
            WeatherForecastForEdit updatedItem = forecasts.Where(x => x.ID == item.ID).FirstOrDefault();
            item.Date = updatedItem.Date;
            item.Summary = updatedItem.Summary;
            item.TemperatureC = updatedItem.TemperatureC;
            item.IsInEditMode = false;
        }
        else {
            await grid.Refresh();
        }
    }
    protected void UpdateDataSource(List<WeatherForecast> newDataSource) {
        forecasts.Clear();
        foreach (WeatherForecast wf in newDataSource) {
            forecasts.Add(new WeatherForecastForEdit() { ID = wf.ID, Date = wf.Date, Summary = wf.Summary, TemperatureC = wf.TemperatureC });
        }
    }
}