MudRadigroup inside the Datagrid in mudblazor not working

Question

I am trying to access mudradiogroup that is inside the muddatagrid. When i try to select single radiobutton , its select all. Please check and help me

here is the code and link https://try.mudblazor.com/snippet/QYQIEJmIGpDVaCco

@inject ISnackbar Snackbar

<MudDataGrid Items="@employees" Filterable="false" SortMode="@SortMode.None" Groupable="false">
    <Columns>
        <PropertyColumn Property="x => x.Name" />
       @*<PropertyColumn Property="x => x.Position" />
        <PropertyColumn Property="x => x.YearsEmployed" Title="Years Employed" />
        <PropertyColumn Property="x => x.Salary" Format="C" />
        <PropertyColumn Property="x => x.Salary * x.YearsEmployed" Title="Total Earned" Format="C" />*@
        <TemplateColumn CellClass="d-flex justify-end">
            <CellTemplate>
                <MudStack Row>
                     @* <MudRating Size="@Size.Small" SelectedValue="@context.Item.Rating" />*@

                        <MudRadioGroup T="string" @bind-Value="@SelectedOption" SelectedValue="@context.Item.ispresent" 
                        SelectedOptionChanged="OnSelectedOptionChanged">
        <MudRadio Option="@("Yes")" Value="@("Yes")" Color="Color.Primary">Yes</MudRadio>
        <MudRadio Option="@("No")" Value="@("No")" Color="Color.Secondary">No</MudRadio>
       
    </MudRadioGroup>
                  
                    @*<MudButton Size="@Size.Small" Variant="@Variant.Filled" Color="@Color.Primary">Hire</MudButton>*@
                </MudStack>
            </CellTemplate>
        </TemplateColumn>
    </Columns>
</MudDataGrid>

@code {
    public record Employee(string Name, string Position, int YearsEmployed, int Salary, int Rating,string ispresent);
    public IEnumerable<Employee> employees;
 public string SelectedOption { get; set; }
    protected override void OnInitialized()
    {
        employees = new List<Employee>
        {
            new Employee("Sam", "CPA", 23, 87_000, 1,"No"),
            new Employee("Alicia", "Product Manager", 11, 143_000, 5,"Yes"),
            new Employee("Ira", "Developer", 4, 92_000, 3,"No"),
            new Employee("John", "IT Director", 17, 229_000, 4,"No"),
        };
    }
     private void OnSelectedOptionChanged(string selectedOption)
 {
     SelectedOption = selectedOption;
     Snackbar.Add(selectedOption);
     // call your stuff
 }
}

I am trying to access radioubutton from datagrid in the mud blazor component

Answer 1

All your radio groups are bound to the same SelectedOption so once one is changed, they all change. Each group needs to have its own binding. Since each row represents an employee, you can create a dictionary to store an identifier for the row/employee and the value of the radio button selection for that row.

You can try this solution... I made some assumptions on setting default selections based on the use of SelectedValue in the code you provided.

<MudDataGrid Items="@employees" Filterable="false" SortMode="@SortMode.None" Groupable="false">
    <Columns>
        <PropertyColumn Property="x => x.Name" />
        <TemplateColumn CellClass="d-flex justify-end">
            <CellTemplate>
                <MudStack Row>
                    <MudRadioGroup T="string" @bind-Value="_employeeStatus[context.Item.Name]"
                                   SelectedOptionChanged="OnSelectedOptionChanged">
                        <MudRadio Value="@("Yes")" Color="Color.Primary">Yes</MudRadio>
                        <MudRadio Value="@("No")" Color="Color.Secondary">No</MudRadio>
                    </MudRadioGroup>
                </MudStack>
            </CellTemplate>
        </TemplateColumn>
    </Columns>
</MudDataGrid>

    public Dictionary<string, string> _employeeStatus = new();    
    
    protected override void OnInitialized()
    {
        employees = new List<Employee>
        {
            new Employee("Sam", "CPA", 23, 87_000, 1, "No"),
            new Employee("Alicia", "Product Manager", 11, 143_000, 5, "Yes"),
            new Employee("Ira", "Developer", 4, 92_000, 3, "No"),
            new Employee("John", "IT Director", 17, 229_000, 4, "No"),
        };

        foreach (var employee in employees)
        {
            _employeeStatus.Add(employee.Name, employee.ispresent);
        }
    }

You'd actually want to dictionary to be keyed on an employee id or something that's actually unique (not name as used in the example).