Accessing currently iterate item in MudDataGrid

Question

I am trying to use MudDataGrid in editing mode to handle tag data.

Some tags are supposed to be set once at resource creation, and then cannot be modified but I still want to list them. To facilitate this use case, I'd like to disable the edit button for certain rows.

The class that is used in the data grid looks like this:

private class TagRowData
{
    public string Key { get; init; }
    public string? Value { get; set; } = string.Empty;
    public bool IsReadOnly { get; init; }
    public bool IsOptional { get; init; }
    public long? LastModifiedAt { get; init; }
}

I use it in the data grid like this:

<MudDataGrid 
    T="TagRowData"
    Items="@Tags"
    Loading="!Tags.Any()"
    EditMode="DataGridEditMode.Cell"
    Bordered="true"
    LoadingProgressColor="Color.Primary">
    <Columns>
        <PropertyColumn Property="t => t.Key" Title="Key" IsEditable="false"/>
        <PropertyColumn Property="t => t.Value" Title="Value" IsEditable="true">
            <EditTemplate>
                <MudSelect @bind-Value="context.Item.Value" Required RequiredError="You must select a Position!!!">
                    <MudSelectItem Value="0">zero</MudSelectItem>
                    <MudSelectItem Value="1">one</MudSelectItem>
                    <MudSelectItem Value="17">seventeen</MudSelectItem>
                </MudSelect>
            </EditTemplate>
        </PropertyColumn>
        <PropertyColumn Property="t => t.LastModifiedAt" Title="Last modified" IsEditable="false"/>
        <!-- How can I achieve a conditional hidden based on the context of the row? -->
        <TemplateColumn Hidden="false" CellClass="d-flex justify-end">
            <CellTemplate>
                <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Filled.Edit" OnClick="@context.Actions.StartEditingItemAsync" />
            </CellTemplate>
        </TemplateColumn>
    </Columns>
</MudDataGrid>

However, I cannot find a way to access the context of the row that the edit button belongs to. I would like to do something similar to this for the Hidden attribute:

<TemplateColumn Hidden="@context.Item.Value.IsReadOnly" CellClass="d-flex justify-end">

If I try this my IDE tells me this is not available:

How should I approach this problem? Is there any way to figure out where the context variable is available?

Answer 1

AFAIK I don't believe you can access the context child content of the component directly in the attribute of the parent component that defines it. That would be similar to accessing a variable before it's defined.

Even if it you could somehow access the context in the TemplateColumn's Hidden property then, it would hide the entire column, as that component is at a parent level instead of hiding columns at a cell level.

Here's an approach you can take. Conditionally render different icons based on the context.

 <TemplateColumn CellClass="d-flex justify-end">
     <CellTemplate>
         @if (context.Item.IsReadOnly)
        {
            <MudIconButton />
        }
        else
        {
            <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Filled.Edit" OnClick="context.Actions.StartEditingItemAsync" />
        }
    </CellTemplate>
</TemplateColumn>

MudBlazor snippet