Using Checkbox to select all radio buttons in Grid Component

[Kapil Shah]

Hello everyone, 

I am using a checkbox in the Header Template of Blazor Grid Component. I have radio buttons in one of the  Template columns of the Grid. I want to use the checkbox in the header template to select all the radio buttons in the grid.  I have attached a sample project.

In the sample project 

1)  In the change event of Checkbox-> onNewDataChange, when the checkbox is checked,  I am binding the RadioButtonNewDataInstance to stringchecked and the radio button is showing checked

Question is how do I make all the radio buttons in the grid checked when the checkbox->onNewDataChange is checked

How do I ref multiple instance of radio buttons in the grid and bind the values as checked in the onNewDataChange Event?

Thanks

Kapil

Attachment: Blazor_National_Duplicate_RadioButtn_984cb1d2.zip

[Monisha Saravanan]

Hi Kapil,

Greetings from Syncfusion support.

We suspect that you need to select all the radio buttons. To select all the buttons we suggest you to provide unique reference to the radio button. Also kindly remove the Name property from the Radio button component. Here we have handled the Radio button component by storing its instance in a dictionary. So we suggest you to handle the radio buttons by using the below way. Kindly refer the below attached code snippet and sample for your reference.

 <div class="content-bordered">

    <SfGrid TValue=Stage_Volume_National_Duplicates_View AllowPaging=true @ref="GridInstance" AllowTextWrap=true DataSource="@Volume_National_Duplicates_Views" RowHeight=35 >

     <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>

        <GridSelectionSettings  PersistSelection="true" CheckboxOnly="true"></GridSelectionSettings>

        <GridPageSettings PageSize = "10"  PageCount="10"></GridPageSettings>

        <GridColumns>

        <GridColumn>

             <HeaderTemplate>

                <div>

                  <SfCheckBox CssClass="e-info" @onchange="onNewDataChange" @bind-Checked="isNewDataChecked"></SfCheckBox>

                   Use New Data

                 

                </div>

            </HeaderTemplate>

            <Template>

                    @{

                        var  newData = (context as Stage_Volume_National_Duplicates_View);

                        var radioBtnNewDataName = "radioBtn-New" + newData.Station_Id;

 

                        <SfRadioButton @ref=" Radio[newData.Station_Id]"  ValueChange="ValueNewDataChange" TChecked="bool"></SfRadioButton> <span> Use New Data</span>

                }

            </Template>

        </GridColumn>

...            

        </GridColumns>

    </SfGrid>

 

 

</div>

 

@code {

    private Dictionary<string, SfRadioButton<bool>> Radio = new Dictionary<string, SfRadioButton<bool>>();

    SfRadioButton<bool> RadioButtonNewDataInstance;

    SfRadioButton<string> RadioButtonOldDataInstance;

    SfGrid<Stage_Volume_National_Duplicates_View> GridInstance;

    private bool isNewDataChecked = false;

    private bool isOldDataChecked = false;

    private string stringChecked = string.Empty;

 

    List<Stage_Volume_National_Duplicates_View> Volume_National_Duplicates_Views = new List<Stage_Volume_National_Duplicates_View>

    {

        new Stage_Volume_National_Duplicates_View() {Station_Id = "000100",Batch_Record_Count = 1152,National_Record_Count = 1152},

        new Stage_Volume_National_Duplicates_View() {Station_Id = "000104",Batch_Record_Count = 2688,National_Record_Count = 2688}

 

    };   

  

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_National_Duplicate_RadioButtn982771735.zip

Please let is know if you have further concerns.

Regards,

Monisha

[Kapil Shah]

Hi Monisha,

How do I bind the radio buttons to show as checked when selecting the checkbox in the header button as checked. Also how I show the radio button  as uncheck by deselecting the checkbox in the header template

[Kapil Shah]

I am able to select all/de select all the radio buttons with the checkboxes . However I have another issue which I am unable to fix.

I have two columns of Check boxes with Radio buttons ( Use New Data and Ignore Old Data).

Scenario

I chose a radio button in Use New Data. column It gets selected. Now I go and select radio button in Ignore Old Data.. column The problem is the radio button in Use New Data column remains selected. It should get unselected

Vice-versa.

Similarly if I chose the radio button Ignore Old Data column and then chose the radio button in User New Data. The radio button in Old Data column does not get de selected

I am calling the ValueChange event of the radio button to deselect the radio buttons of the other columns and its not working

Please see attached sample

Attachment: Blazor_National_Duplicate_RadioButtn_a014affa.zip

[Kapil Shah]

Any update, 

Thanks

Kapil 

[Monisha Saravanan]

Hi Kapil,

We are currently validating your query at our end. We will update further details within 16^th February, 2023. Until then we appreciate your patience.

Regards,

Monisha

[Kapil Shah]

Update,

I added name for both the radio buttons in the grid. If I do that I am able select radio buttons between Old and New Data Radio buttons. However I lose the functionality of Select All checkboxes for both  Old and New Data.

I need to have both the functionality work (Select all  checkbox and chosing between radio buttons

Thanks

Kapil

[Monisha Saravanan]

Hi Kapil,

Query: “I need to have both the functionality work (Select all  checkbox and choosing between radio buttons”

After careful consideration, we suspect that it is not feasible to achieve both the functionality of selecting all checkboxes and choosing between radio buttons at the same time. Because while providing name value it is not possible to select all the RadioButton value. In the mean time we have raised this query to the SfRadioButton component interally to check the feasibility of your requirement. We will update further details within 17^th February 2023.

Please let us know if you have any concerns.

Regards,

Monisha

[Monisha Saravanan]

Hi Kapil,

We have discussed your requirement with our SfRadioButton component team, and they have confirmed that achieving both functionalities simultaneously is not possible. If you wish to use a checkbox to select all the radio button columns, you can remove the name property from the RadioButton component. Or else, you can include the name property to select/deselect individual radio buttons in the column. However, they recommend to use a checkbox instead of the RadioButton component to resolve the issue on your end.

If you have any concern, please don’t hesitate to reach us