How to use radio button instead of checkbox for row selection in Blazor DataGrid
16 Sep 20253 minutes to read
By default, the Syncfusion® Blazor DataGrid provides checkbox selection to allow multiple row selection. If there is a need to allow only one row to be selected at a time, a radio button can be used instead of checkbox selection. This can be achieved by using the column Template feature to render a SfRadioButton in each row. The radio button can be linked to a unique value from the data source, such as the primary key field.
Steps to configure row selection using radio buttons:
- When a radio button is selected, the valueChange event is triggered.
- In the
ValueChange
event, retrieve the row index using the GetRowIndexByPrimaryKey method based on the selected value. - Select the corresponding row using the selectRow method.
- To prevent selection in the Grid by clicking the row, the CheckboxOnly property is enabled.
The following example demonstrates how to handle row selection in the Grid using radio buttons:
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
<SfGrid @ref="GridInstance" DataSource="@Orders" AllowSelection="true" AllowPaging="true" TValue="Order">
<GridSelectionSettings CheckboxOnly="true"></GridSelectionSettings>
<GridColumns>
<GridColumn>
<Template>
@{
var PrimaryVal = (context as Order);
<SfRadioButton @ref="RadioButtonInstance" Name="RadioBtn "Value="@PrimaryVal.CustomerID" ValueChange="ValueChange" TChecked="string"></SfRadioButton>
}
</Template>
</GridColumn>
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" IsPrimaryKey="true" >
</GridColumn>
<GridColumn Field=@nameof(Order.ShipCity) HeaderText="Ship City" Width="110"></GridColumn>
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2"></GridColumn>
<GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Width="110" Type="Syncfusion.Blazor.Grids.ColumnType.Date"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<Order> Orders { get; set; }
SfRadioButton<string> RadioButtonInstance;
SfGrid<Order> GridInstance;
protected override void OnInitialized()
{
Orders = Enumerable.Range(1, 4).Select(x => new Order()
{
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[x],
ShipCity = (new string[] { "Berlin", "Madrid", "Cholchester", "Marseille", "Tsawassen" })[new Random().Next(5)],
Freight = 2.1 * x,
OrderDate = DateTime.Now.AddDays(-x),
}).ToList();
}
public async void ValueChange(ChangeArgs<string> args)
{
var index = await GridInstance.GetRowIndexByPrimaryKey(args.Value); // Fetch the row index based on the unique value of RadioButton.
GridInstance.SelectRow(index); // Select the corresponding Grid row.
}
public class Order {
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
public string ShipCity { get; set; }
}
}