Programmatically loop through the rows of a MudDataGrid

Question

How can I access and manipulate individual rows in a MudDataGrid within a Blazor WebAssembly application using C#? Specifically, I want to change the background color or remove rows programmatically. Sample Project

Similar question but different context ...https://stackoverflow.com/questions/75376810/muddatagrid-access-filtered-records-programmatically

Answer 1

You could access and modify the specific Person in the People IEnummerable. I'm using a List instead of an IEnummerable, just so I can use Remove, RemoveAt.

To remove a row you can use

private void RemoveRow(int index)
{
  People.RemoveAt(index);
}

To change the background-color use the RowStyleFunc of the DataGrid. But before add a new Property ColorCode on Person

public record Person(string Name, int Age, string State, string ColorCode){
  public string ColorCode{get; set;}
}

And use and define the RowStyleFunc of the DataGrid

<MudDataGrid T="Person" Items="@People" ColumnResizeMode="ResizeMode.Container" @ref="mudGrid" RowStyleFunc="@_rowStyleFunc">


private Func<Person, int, string> _rowStyleFunc => (x, i) =>
{
  // clear all rowStyles
  string style = string.Empty;
  style += $"background-color:#{x.ColorCode}";

  return style;
};

And finally a method to change the property ColorCode

private async void ChangeRowBackgroundColor(int index)
{
  People[index].ColorCode = "FFFFFF";
}

Additionally you can also add Buttons to each row and access the person there

<Columns>
    <PropertyColumn Property="x => x.Name" CellStyle="max-width: 100px; overflow-x: hidden; white-space: nowrap;" />
    <TemplateColumn T="Person" TProperty="String" Sortable="false" Filterable="false" Title="Buttons">
        <CellTemplate>
            <MudMenu Label="Actions" Variant="Variant.Filled" DisableElevation="true"
                     EndIcon="@Icons.Material.Filled.KeyboardArrowDown" IconColor="Color.Secondary" TransformOrigin="Origin.TopLeft">
                <MudMenuItem OnClick="@(async () => await RemovePerson(context.Item))">Remove me!</MudMenuItem>
                <MudMenuItem OnClick="@(async () => await ColorPerson(context.Item))">Color Me!</MudMenuItem>
            </MudMenu>
        </CellTemplate>
    </TemplateColumn>
</Columns>




private async Task RemovePerson(Person person)
{
  People.Remove(person);
}

Snippet with examples