We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

RadioButton instead of Checkbox in Grid in single selection mode

Hi.RadioButton  instead of Checkbox in Grid in single selection mode
Please look at the attachment

Attachment: New_folder_af7c628e.zip

3 Replies

RS Renjith Singh Rajendran Syncfusion Team January 31, 2020 03:47 AM

Hi Ebi, 

Thanks for contacting Syncfusion support. 

We suggest you to use the “Column Template feature of Grid”. We have prepared a sample based on this requirement. Please download the sample from the link below, 
In the above demo, we will be rendering a “EjsRadioButton” in Grid by using the Column Template feature of Grid. And in the “ValueChange” event handler of RadioButton we will be calling the “SelectRow” method of Grid based on the row index fetched from the PrimaryKey column value of Grid(this primary key value is assigned as Value for Radio button also. Ensure that this primary key value is unique). And to prevent selection in Grid by clicking the row we have enabled the “CheckboxOnly” property. So now the Grid row will be selected only when the radio button in the Grid column is checked.  

Please refer the code example and the code explanation below, 

<EjsGrid @ref="GridInstance" DataSource="@Orders" AllowPaging="true"> 
    <Syncfusion.EJ2.Blazor.Grids.GridSelectionSettings CheckboxOnly="true"></Syncfusion.EJ2.Blazor.Grids.GridSelectionSettings>      
    <GridPageSettings PageSize="5"></GridPageSettings> 
                    var PrimaryVal = (context as Order); 
                    <EjsRadioButton Name="RadioBtn" @ref="Radio" Value="@PrimaryVal.CustomerID" ValueChange="ValueChange"></EjsRadioButton>      @*Set Value property based on primary Key column(CustomerID) value.*@ 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" IsPrimaryKey="true" Width="150"></GridColumn>     @*Set primary Key for an unique value column and assign that column value as value for radio button’s Value property also*@ 
    EjsRadioButton Radio; 
    EjsGrid<Order> GridInstance; 
   public async void ValueChange(ChangeArgs 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. 

Documentation :  
Please get back to us if you need further assistance. 

Renjith Singh Rajendran. 

ET ebi torabi February 1, 2020 01:29 AM

Hi Renjith Singh Rajendran.Thank you very much. 

RS Renjith Singh Rajendran Syncfusion Team February 2, 2020 11:58 PM

Hi Ebi, 

Thanks for your update. 

We are happy to hear that you have achieved your requirement. 

Please get back to us if you need further assistance. 

Renjith Singh Rajendran. 

Live Chat Icon For mobile
Up arrow icon