复杂对象的 Blazorise Datagrid 内联编辑

Question

I am using Blazorise Datagrid . This extension support inline editing as well. When editing a simple object the inline edit working just fine. But when i am using object as property in my parent object the update process does not work as expected. When i changed the city the value not updated. Is there anything I have missed? Thanks in advance

Here is my code

<section class="section">
<div class="container">
    <DataGrid Data="forecasts" TItem="WeatherForecast" EditMode="Blazorise.DataGrid.DataGridEditMode.Inline">
        <DataGridCommandColumn TItem="WeatherForecast" CellsEditableOnEditCommand="true"></DataGridCommandColumn>
        <DataGridDateColumn TItem="WeatherForecast" Field="@nameof(WeatherForecast.Date)" Caption="Date" Editable="true"></DataGridDateColumn>
        <DataGridDateColumn TItem="WeatherForecast" Field="@nameof(WeatherForecast.Temperature)" Caption="Temperature" Editable="true"></DataGridDateColumn>
        <DataGridSelectColumn TItem="WeatherForecast" Field="@nameof(WeatherForecast.City)" Caption="City" Editable="true">
            <DisplayTemplate>
                @{
                   var name = (context as WeatherForecast).City?.Name;
                   @name
                 }
            </DisplayTemplate>
            <EditTemplate>
                @{
                    <Select TValue="City" SelectedValue="@((City)(((CellEditContext)context).CellValue))" SelectedValueChanged="@( v => ((CellEditContext)context).CellValue = v)">
                        @foreach (var item in Cities)
                        {
                            <SelectItem TValue="City" Value="@(item)">@item.Name</SelectItem>
                        }
                    </Select>
                }
            </EditTemplate>
        </DataGridSelectColumn>
    </DataGrid>
</div>

@code {
private List<WeatherForecast> forecasts;
private List<City> Cities;

protected override async Task OnInitializedAsync()
{
    forecasts = await ForecastService.GetForecastAsync(DateTime.Now); // get list of forecast
    Cities = await ForecastService.GetCityListAsync(); // get list of cities
}}
            

Model classes

public class WeatherForecast
{
    public int Id { get; set; }

    public DateTime Date { get; set; }

    public int Temperature { get; set; }

    public City City { get; set; }
}

public class City
{
    public int Id { get; set; }
    public string Name { get; set; }
}

Answer 1

Try this workaround since Select component doesn't support complex objects binding:

<EditTemplate>
    <Select 
        TValue="int"
        SelectedValue="@((int)((City)(((CellEditContext)context).CellValue)).Id)" 
        SelectedValueChanged="@( v => ((CellEditContext)context).CellValue = Cities.First(x=> x.Id == v))">
        @foreach (var item in Cities)
        {
            <SelectItem TValue="int" Value="@(item.Id)">@item.Name</SelectItem>
        }
    </Select>
</EditTemplate>