Setting Default values

[Jeremy]

Hi, can you please help me with the Radio Button control as I cant get the default behaviour the I am looking for.

<div>

  <label> Selected Rate Type: @SelectdRateType</label>

  <p></p>

  <SfRadioButton Label="Consignment" Name="RateTypeRadio"

                 Checked="@(SelectdRateType == RateTypes.Consignment)"

                 @onchange="@(() => { SelectdRateType = RateTypes.Consignment; })">

  </SfRadioButton>

  <SfRadioButton Label="Unit" Name="RateTypeRadio"

                 Checked="@(SelectdRateType == RateTypes.Unit)"

                 @onchange="@(() => { SelectdRateType = RateTypes.Unit; })">

  </SfRadioButton>

  <p></p>

  <button style="width:auto" @onclick="@(e => ButtonClickedHandler(e))">

    Reset

  </button>

</div>

@code {

  public enum RateTypes

  {

    Consignment,

    Unit

  }

  public RateTypes SelectdRateType { get; set; } = RateTypes.Consignment;

  private void ButtonClickedHandler(MouseEventArgs e)

  {

    SelectdRateType = RateTypes.Consignment;

    StateHasChanged();

  }

}

I would expect the following behaviour

1) I have defaulted SelectdRateType  tp RateTypes.Consignment, so I would expect that when the page loads / renders that the consignment radio button is selected, but that doesnt happen. (note the Label correctly shows the selected rate type)

2) If I select the "unit" radio button, then press the "reset" button, the label correctly shows the selected rate type as "consignment", but the consignment radio button is not selected.

Thanks,

Jeremy

[Mohan Kumar Ramasamy]

Hi Jeremy, 

 

We have checked your reported query, we have resolved your reported issue using two-way binding Checked property. Please refer below code snippets. 

 

 

<div> 

    <label> Selected Rate Type: @SelectdRateType</label> 

    <p></p> 

    <SfRadioButton Label="Consignment" Name="RateTypeRadio" Value="Consignment" @bind-Checked="@SelectdRateType"> 

    </SfRadioButton> 

    <SfRadioButton Label="Unit" Name="RateTypeRadio" Value="Unit" @bind-Checked="@SelectdRateType"> 

    </SfRadioButton> 

    <p></p> 

    <button style="width:auto" class="e-btn" @onclick="@ButtonClickedHandler"> 

        Reset 

    </button> 

</div> 

 

@code { 

 

    public enum RateTypes 

    { 

        Consignment, 

        Unit 

    } 

 

    public RateTypes SelectdRateType { get; set; } = RateTypes.Consignment; 

 

    private void ButtonClickedHandler(MouseEventArgs e) 

    { 

        SelectdRateType = RateTypes.Consignment; 

    } 

 

} 

 

For your reference, we have prepared a sample based on this, please refer below link. 

 

Link:  https://www.syncfusion.com/downloads/support/forum/159844/ze/RadioButtonBehaviour-299855018  

 

Please let us know, if you need any further assistance. 

 

Regards, 

Mohan kumar R 

[Jeremy]

Awesome, thanks for that. I think you should consider adding something like this to the tutorial page - being able to bind to an enum value rather than the current example of using "strings"

[Mike Chafin]

Jeremy,

It is unclear if this layout will be used for a production UI or not. Having a reset is not appropriate for radio buttons - radio buttons are mutually exclusive.

Ever since the first edition of Inside Macintosh in 1984, the rule has been the same for when to use checkboxes versus radio buttons. All subsequent GUI standards and the official W3C Web standards have included the same definition of these two controls:

1. Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.
2. Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn't uncheck the others.
3. A stand-alone checkbox is used for a single option that the user can turn on or off.

It is amazing how many time I see radio buttons and checkboxes misused.

[Jeremy]

Thanks Mike,

no - my layout is not production code (because who would be posting production IP to a public forum?) it was simply to demonstrate an issue I was having which Syncfusion answered accurately and with good clarity.

[Mohan Kumar Ramasamy]

Hi Jeremy, 

 

Thanks for the feedback, we appreciate it 

 

Regards, 

Mohan kumar R