How to update MudDataGrid after onchange trigger?

Question

I have a MudDataGrid defined loosely as this:

<MudDataGrid @ref="_dataGrid" Virtualize="true" Dense EditMode="DataGridEditMode.Cell" ReadOnly="false" T="InmodeloReposicion" Items="@modeloRepoDisp" SortMode="SortMode.Multiple" Filterable="true" Hideable="true" HorizontalScrollbar="false" FilterMode="@DataGridFilterMode.ColumnFilterRow" FilterCaseSensitivity="DataGridFilterCaseSensitivity.CaseInsensitive" @bind-SelectedItem="selectedItem">

...

<PropertyColumn Property="x => x.VentaMes12" Title="Venta Mes 12" IsEditable="false" CellStyle="max-width: 100px;" CellStyleFunc="_cellStyleFunc12" />


<TemplateColumn Title="Venta Atípica">
<EditTemplate Context="product">
<MudTextField T="int?" Value="@product.Item.ValoresAtipicos" Immediate="true" ValueChanged="@(newValue => ValChanged(newValue, product.Item) )" />
</EditTemplate>
<CellTemplate Context="product">@product.Item.ValoresAtipicos</CellTemplate></TemplateColumn>

...

</MudDataGrid>

and the ValueChanged method:

    private void ValChanged(int? value, InmodeloReposicion a){
        try
        {
            a.ValoresAtipicos = value;
            a.Mes12 = value;
            decimal? valores = a.ConsumoPromPorDia - a.ValoresAtipicos;
            a.ConsumoPromPorDia = Math.Max(a.ConsumoPromPorDia - a.ValoresAtipicos ?? 0, 0);
        }
        catch (Exception)
        {

            throw;
        }

        StateHasChanged();
    }

Where Items is a list that is populated on a click button and is on-memory. On this grid I have a column that gets a number value and updates other values on other columns as in Venta Mes 12 but if I try updating the value it doesn't do anything.

I've tried adding StateHasChanged to no avail

Answer 1

I tried to retrieve your page. I think Immediate="true" should be removed which destroy the logic. And don't forget to use interactive rendermode all works well.

<MudDataGrid Virtualize="true" T="InmodeloReposicion" Items="@modeloRepoDisp" ReadOnly="false" EditMode="DataGridEditMode.Cell">
    <Columns>
        <PropertyColumn Property="x => x.VentaMes12" Title="Venta Mes 12" />
        <PropertyColumn Property="x => x.Mes12" Title="Mes 12" />
        <TemplateColumn Title="Venta Atípica">
            <EditTemplate Context="product">
                <MudTextField T="int?"
                Value="@product.Item.ValoresAtipicos" ValueChanged="@(newValue => ValChanged(newValue, product.Item) )" />
            </EditTemplate>
            <CellTemplate Context="product">
                @product.Item.ValoresAtipicos
            </CellTemplate>
        </TemplateColumn>
        <PropertyColumn Property="x => x.ConsumoPromPorDia" Title="ConsumoPromPorDia" />
    </Columns>
</MudDataGrid>

@code {

    private ObservableCollection<InmodeloReposicion> modeloRepoDisp = new ObservableCollection<InmodeloReposicion>
        {
            new InmodeloReposicion { Id = 1, VentaMes12 = 100, ValoresAtipicos = 10, ConsumoPromPorDia = 50 },
            new InmodeloReposicion { Id = 2, VentaMes12 = 200, ValoresAtipicos = 20, ConsumoPromPorDia = 70 },
            new InmodeloReposicion { Id = 3, VentaMes12 = 300, ValoresAtipicos = 30, ConsumoPromPorDia = 90 }
        };

    private void ValChanged(int? value, InmodeloReposicion a)
    {
        try
        {
            a.ValoresAtipicos = value;
            a.Mes12 = value;
            a.ConsumoPromPorDia =Math.Max((int)a.ConsumoPromPorDia - (a.ValoresAtipicos ?? 0), 0);
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error: {ex.Message}");
        }

        // Ensure UI refresh
        modeloRepoDisp = new ObservableCollection<InmodeloReposicion>(modeloRepoDisp);

    }

    public class InmodeloReposicion
    {
        public int Id { get; set; }
        public int VentaMes12 { get; set; }
        public int? Mes12 { get; set; }
        public int? ValoresAtipicos { get; set; }
        public int? ConsumoPromPorDia { get; set; }
    }
}