Radiobuttons form binding - default empty

[Davy]

I am trying to implement a Yes/No RadioButton with form model binding, similar like your male/female example:

https://blazor.syncfusion.com/documentation/radio-button/how-to/radiobuttonfor/?no-cache=1

But I am having problems with it.

The initial state should be empty - no radiobutton should be checked. I guess the form boolean needs to be nullable, but then the example is failing.

Also when you select "female" (or "No" in my code), this radiobutton is not prefilled (checked) when re-loading the form. I assume because there is no binding on the second radiobutton?

[Saranya Dhayalan]

Hi Davy, 

  

Thank you for contacting Syncfusion support 

  

We have checked your reported query and we would inform you that we have some issues in our radiobutton two way binding. So, we have considered this as defect in our end and fix of this issue will be included in our volume 2 2020 release. You can track the status of this defect using below link from our feedback portal,  

 

https://www.syncfusion.com/feedback/12493/two-way-binding-issue-in-radiobutton  

 

However, we have provided the workaround solution for your requirement. In that we have using the required validator and changed the radio button value based on the model value. In this way you can achieve your requirement. Please refer the below code snippet and sample link.  

  

index.razor  

  

@using Syncfusion.Blazor.Buttons 

@using System.ComponentModel.DataAnnotations 

 

<EditForm Model="@Annotate" OnValidSubmit="onValid"> 

    <DataAnnotationsValidator></DataAnnotationsValidator> 

    <div class="form-group"> 

        <SfRadioButton Label="Male" Name="Gender" Value="male" Checked="@(Annotate.Gender == "male")" @onchange="@(() => { Annotate.Gender = "male"; })"></SfRadioButton> 

        <SfRadioButton Label="Female" Name="Gender" Value="female" Checked="@(Annotate.Gender == "female")" @onchange="@(() => { Annotate.Gender = "female"; })"></SfRadioButton> 

        <ValidationMessage For="@(() => Annotate.Gender)" /> 

    </div> 

    <SfButton HtmlAttributes="@Submit" Content="Submit" IsPrimary="true"></SfButton> 

</EditForm> 

 

@code { 

    public Annotation Annotate = new Annotation(); 

    public class Annotation 

    { 

        [Required] 

        public string Gender { get; set; } 

    } 

    public Dictionary<string, object> Submit = new Dictionary<string, object>() 

{ 

        { "type", "submit"} 

    }; 

 

    public void onValid() 

    { 

 

    } 

} 

  

  

Please check and get back to us if you need further assistance.  

  

Regards,  

Saranya D  

[Jacky]

Hi  Saranya ,

I have a  column sfradiobutton inside the  Sfgrid  seems the  radiobutton   two way binding issure.

I link the feedback portal, access deny. 

https://www.syncfusion.com/feedback/12493/two-way-binding-issue-in-radiobutton  

Is there other solution for the issure?

Regards!

Jacky

[Keerthikaran Venkatachalam]

Hi Jacky,

We have reviewed the reported query, and in order to resolve the two binding issues, you need to set a unique name for each radio button in every grid column. Please refer to the code snippet and sample below.

<SfGrid DataSource="@Orders" AllowPaging="true">

    <GridPageSettings PageSize="5"></GridPageSettings>

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>

        <GridColumn Field=@nameof(Order.Verified) HeaderText="Verified" Width="200">

             <Template Context="RadioContext">

                @{

                var employee = (RadioContext as Order);

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

                        <SfRadioButton Label="first" Name="@employee.OrderID.ToString()" @ref="Radio[employee.OrderID]" Value="true" TChecked="bool" ></SfRadioButton>

                        <SfRadioButton Label="second" Name="@employee.OrderID.ToString()" @ref="Radio[employee.OrderID]" Value="true" TChecked="bool"></SfRadioButton>

                        <SfRadioButton Label="third" Name="@employee.OrderID.ToString()" @ref="Radio[employee.OrderID]" Value="true" TChecked="bool"></SfRadioButton>

                        <SfRadioButton Label="fourth" Name="@employee.OrderID.ToString()" @ref="Radio[employee.OrderID]" Value="true" TChecked="bool"></SfRadioButton>

                    </div>

                }

            </Template>

        </GridColumn>

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.DateOnly" TextAlign="TextAlign.Right" Width="130"></GridColumn>

        <GridColumn Field=@nameof(Order.OrderTime) HeaderText="Order Time" Type="ColumnType.TimeOnly" TextAlign="TextAlign.Right" Width="130"></GridColumn>

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>

    </GridColumns>

</SfGrid>

If we misunderstood your query, could you please provide more details with the issue's replicable sample or replicate the issue in our sample with replication steps and a video demonstration? Based on that, we will check and provide you with a better solution quickly.

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

Attachment: Sample_74dc9562.zip