1. Home
  2. Forum
  3. Blazor
  4. "unselect" a Radiobuttons the second time you click on it

"unselect" a Radiobuttons the second time you click on it

I'm using Blazor Server 19.4 and I have a page full of radiobuttons to let the user the option to answer "yes" or "no" to a question

I don't find a simple solution to be able to click on the button and the second time to "unselect" the option leaving in this way "yes" or "no" totally empty in case the user is not sure about the answer.

The buttons are bound to a boolean value in DB where initially all the values are null

When I open the EditForm with inside all the radiobuttons, the first time all the buttons are empty and this is correct.

When I click the second time on an option, I tried to "reset" it using the  "ondblclick" event as you can see below but this doen't work bacause the option is still selected.

I tried also using checkboxes where you can select and unselect an option but they can't be grouped in order to have a toogle selection between "yes" or "no" option


<EditForm EditContext="@EC">

    <SfCard >

     <CardContent>

         <div class="form-row">

                <div class="col-md-5">

                <ul>

                    <li @ondblclick="Click">

                        <SfRadioButton Label="Epatite virale Si" LabelPosition="LabelPosition.Before" Name="epatite" Value=true Checked="@DatiCli.EPATITE" TChecked="bool?"></SfRadioButton>

                        <SfRadioButton Label="No" Name="epatite" LabelPosition="LabelPosition.Before" Value=false Checked="@DatiCli.EPATITE" TChecked="bool?"></SfRadioButton>

                    </li>

                </ul>

                </div>

            </div>


private void Click()

    {

        DatiCli.EPATITE = null;


    }


5 Replies
AS Aravinthan Seetharaman Syncfusion Team February 14, 2022 04:06 PM UTC

Hi Walter, 
 
We have checked your requirement. We have achieved your requirement using IJSRuntime. Please refer the below code snippet and sample. 
 
Index.razor 
 
@using Syncfusion.Blazor.Buttons 
@inject IJSRuntime JSRuntime; 
    <ul> 
        <li @ondblclick="click"> 
            <SfRadioButton Label="Epatite virale Si" LabelPosition="LabelPosition.Before" Name="@name" Value=true TChecked="bool?"></SfRadioButton> 
        </li> 
        <li @ondblclick="click"> 
            <SfRadioButton Label="No" Name="@name" LabelPosition="LabelPosition.Before" Value=false TChecked="bool?"></SfRadioButton> 
        </li> 
    </ul> 
@code{ 
    public string name = "epatite"; 
    public bool? DatiCli_EPATITE = null; 
    public async Task click() 
    { 
        await JSRuntime.InvokeAsync<object>("registerClearCallback", name); 
    } 
} 
 
 
_Host.cshtml 
 
<script> 
        window.registerClearCallback = function (name) { 
            var rBtn = document.getElementsByName(name); 
            for (var i = 0; i < rBtn.length; i++) { 
                 rBtn[i].checked = false; 
            } 
        } 
 
    </script> 
 
 
 
Could you please check whether the given details are fulfilling your requirement and get back to us, if you need assistance on this. 
 
Regards, 
Aravinthan S 


WM Walter Martin February 15, 2022 03:03 AM UTC

Thanks for this solution, it's working fine

I have about 50 radiobuttons in my page, is there a way to pass to the click function the source of the dobleclick event ?

or do I have to create 50 functions like this ?

<li @ondblclick="click1"> 

...

<li @ondblclick="click49"> 

<li @ondblclick="click50"> 


SP Sangeetha Priya Murugan Syncfusion Team February 17, 2022 01:00 PM UTC

Hi Walter, 
 
We have checked your reported requirement and it can be achievable by binding the double click event for UL element as like as below. 
 
  
<ul @ondblclick="click"> 
    <li> 
        <SfRadioButton Label="Epatite virale Si" LabelPosition="LabelPosition.Before" Name="@name" Value=true TChecked="bool?"></SfRadioButton> 
    </li> 
    <li > 
        <SfRadioButton Label="No" Name="@name" LabelPosition="LabelPosition.Before" Value=false TChecked="bool?"></SfRadioButton> 
    </li> 
</ul> 
@code{ 
    public string name = "epatite"; 
    public bool? DatiCli_EPATITE = null; 
    public async Task click() 
    { 
        await JSRuntime.InvokeAsync<object>("registerClearCallback", name); 
    } 
} 
 
For your convenience, we have prepared the sample based on your requirement. Please find the link below. 
 
 
Could you please check the above details and get back to us, if you need any further assistance on this? 
 
Regards, 
Sangeetha M 


WM Walter Martin February 17, 2022 07:19 PM UTC

I changed your last demo to show you what I need

I wrote only 2 radiobuttons but I have 50 of them in my page

I'd like to handle the doubleclick event in one method only but I need to pass also the Name value to the method 


Attachment: Server5.0_38daed9e.zip

SP Sangeetha Priya Murugan Syncfusion Team February 18, 2022 11:34 AM UTC

Hi Walter, 
 
Your requirement cab be achievable by rendering the li items in for loop as like as below. 
 
  
<ul> 
    @for (int i = 0; i < @data.Count; i++) 
    { 
        var radioData = data[i]; 
    <li @ondblclick="@(e => click(@radioData.name))"> 
 
        <SfRadioButton Label=@radioData.label LabelPosition=@radioData.position Name=@radioData.name Value=@radioData.value TChecked="bool?"></SfRadioButton> 
    </li> 
    } 
</ul> 
@code{ 
    public string name = "epatite"; 
    public bool? DatiCli_EPATITE = null; 
    public List<ListData> 
 data = new List<ListData> 
     { 
        new ListData{ label = "Epatite virale Si", position = LabelPosition.Before, name = "epatite" , value ="true" }, 
 
        new ListData{ label = "No", position = LabelPosition.Before, name = "epatite" , value = "false" }, 
        new ListData{ label = "Problemi psichici", position = LabelPosition.Before, name = "psichici" , value = "true" }, 
        new ListData{ label = "No", position = LabelPosition.Before, name = "psichici" , value = "false" }, 
             }; 
    public class ListData 
    { 
        public string label { get; set; } 
        public string name { get; set; } 
        public string value { get; set; } 
        public LabelPosition position { get; set; } 
    } 
 
    public async Task click(string name) 
    { 
        //how can I get the "Name" value where I double clicked on ? 
        await JSRuntime.InvokeAsync<object>("registerClearCallback", name); 
    } 
} 
 
For your convenience, we have prepared the sample based on your requirement. Please find the link below. 
 
 
Could you please check the above details and get back to us, if you need any further assistance on this? 
 
Regards, 
Sangeetha M 


Loader.
Up arrow icon