How to use radio buttion in sfgrid

[KINS]

I have sfgrid control in my application.I would like to know how to use radio buttion in sfgrid.

For example:

I have 10 records in grid and I have one column called as "Select".I would like to select any one row from grid

[Vignesh Natarajan]

Hi Hassan,  

 

Thanks for contacting Syncfusion support.  

 

Query: “I have 10 records in grid and I have one column called as "Select".I would like to select any one row from grid” 

 

We have analyzed your query and we have achieved your requirement using Column/Cell Template feature of Grid to render RadioButton component. And using SelectRow method we have selected the record.  

 

Refer the below code example.  

 

<SfGrid @ref="Grid" DataSource="@Employees"> 

    <GridColumns> 

        <GridColumn HeaderText="Select" TextAlign="TextAlign.Center" Width="50"> 

            <Template> 

                @{ 

                    var employee = (context as EmployeeData); 

                    <div class="image"> 

                        <SfRadioButton Name="selection" ValueChange="@((args)=>OnChange(args,employee))" TChecked="bool"></SfRadioButton> 

                    </div> 

                } 

            </Template> 

        </GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="Employee ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.HireDate) HeaderText="Hire Date" Format="d" TextAlign="TextAlign.Right" Width="150"></GridColumn> 

    </GridColumns> 

</SfGrid> 

  

@code{ 

  

    SfGrid<EmployeeData> Grid { get; set; } 

  

    public List<EmployeeData> Employees { get; set; } 

    public async Task OnChange(ChangeArgs<bool> Args, EmployeeData val) 

    { 

        //to find the row index 

        var rowIndex = Grid.CurrentViewData.ToList().IndexOf(val); 

        //select the record using index and SelectRow method 

        await Grid.SelectRow((double)rowIndex,false); 

    } 

 

   

Kindly refer the below sample for your reference 

 

Sample: https://www.syncfusion.com/downloads/support/forum/166671/ze/DataGrid_Server1095480350.zip 

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/columns/#column-template 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRow_System_Double_System_Nullable_System_Boolean__  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan