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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

RadioButton instead of Checkbox in Grid in single selection mode

Thread ID:

Created:

Updated:

Platform:

Replies:

151075 Jan 30,2020 07:39 AM UTC Feb 3,2020 04:58 AM UTC Blazor 3
loading
Tags: Grid
ebi torabi
Asked On January 30, 2020 07:39 AM UTC

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


Attachment: New_folder_af7c628e.zip

Renjith Singh Rajendran [Syncfusion]
Replied On January 31, 2020 08:47 AM UTC

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> 
    <GridColumns> 
        <GridColumn> 
            <Template> 
                @{ 
                    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.*@ 
                } 
            </Template> 
        </GridColumn> 
        <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*@ 
    </GridColumns> 
</EjsGrid> 
 
@code{ 
    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. 

Regards, 
Renjith Singh Rajendran. 


ebi torabi
Replied On February 1, 2020 06:29 AM UTC

Hi Renjith Singh Rajendran.Thank you very much. 

Renjith Singh Rajendran [Syncfusion]
Replied On February 3, 2020 04:58 AM UTC

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. 

Regards, 
Renjith Singh Rajendran. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon