How to use radio buttion in sfgrid

1 Reply
2 Participants

Created by
KI KINS

Platform
Blazor

Platform
Blazor

Control
Grid

Created On
Jun 25, 2021 04:37 AM UTC

Last Activity On
Jun 28, 2021 04:14 AM UTC

Want to subscribe?
SIGN IN

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

1 Reply

VN Vignesh Natarajan Syncfusion Team June 28, 2021 04:14 AM UTC

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);

<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);

}