Checked value

[Alex]

When selecting a radio button from a radio group how do you capture the event and get the value of the radio button selected? We've tried using onclick, onblur and the bind-checked value hasn't been updated.

The only way we've found to get this working is by selecting the radio button twice?

[YuvanShankar Arunagiri]

Hi Alex,

We have checked your reported query, we have get the selected button using two way binding Checked property. Please refer below code snippets. 

 @using Syncfusion.Blazor.Buttons

 

<div class="control-section">

  <div class="radio-control">

    <h4 class="row">Choose an employment status - @CheckedValue</h4>

    <div class="row">

      <SfRadioButton Label="Unspecified" Name="status" Value="Unspecified" @bind-Checked="@CheckedValue"></SfRadioButton>

    </div>

    <div class="row">

      <SfRadioButton Label="Trainee" Name="status" Value="Trainee" @bind-Checked="@CheckedValue"></SfRadioButton>

    </div>

    <div class="row">

      <SfRadioButton Label="Probationary" Name="status" Value="Probationary" @bind-Checked="@CheckedValue"></SfRadioButton>

    </div>

    <div class="row">

      <SfRadioButton Label="Regular" Name="status" Value="Regular" @bind-Checked="@CheckedValue"></SfRadioButton>

    </div>

    <div class="row">

      <SfRadioButton Label="Retired" Name="status" Value="Retired" @bind-Checked="@CheckedValue"></SfRadioButton>

    </div>

    <div class="row">

      <SfRadioButton Label="Dismissed" Name="status" Value="Dismissed" @bind-Checked="@CheckedValue"></SfRadioButton>

    </div>

  </div>

</div>

 

@code

{

  private string CheckedValue = "Trainee";

 

}

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

Link: https://www.syncfusion.com/downloads/support/forum/159504/ze/RadioButtonChecked1231601205  

Please let us know, if you need any further assistance 

Regards,

YuvanShankar A

[Alex]

Hi, 

Thanks for the reply but this doesn't seem to include the click action event as mentioned above.  We've already got  @bind-Checked="@CheckedValue and have tried various combinations to capture the click event to give us the value of the radio button selected.

Alex

[YuvanShankar Arunagiri]

Hi Alex,

We have prepared the sample based on your requirement. Please refer the below code snippet. We can achieve your requirement using the ValueChange event of the radio button.

@using Syncfusion.Blazor.Buttons

 

<div class="control-section">

  <div class="radio-control">

    <div class="row">

      <SfRadioButton Label="Unspecified" Name="status" Value="Unspecified" TChecked="string" ValueChange="OnValueChange"></SfRadioButton>

    </div>

    <div class="row">

      <SfRadioButton Label="Trainee" Name="status" Value="Trainee" TChecked="string" ValueChange="OnValueChange"></SfRadioButton>

    </div>

    <div class="row">

      <SfRadioButton Label="Probationary" Name="status" Value="Probationary" TChecked="string" ValueChange="OnValueChange"></SfRadioButton>

    </div>

    <div class="row">

      <SfRadioButton Label="Regular" Name="status" Value="Regular" TChecked="string" ValueChange="OnValueChange"></SfRadioButton>

    </div>

    <div class="row">

      <SfRadioButton Label="Retired" Name="status" Value="Retired" TChecked="string" ValueChange="OnValueChange"></SfRadioButton>

    </div>

    <div class="row">

      <SfRadioButton Label="Dismissed" Name="status" Value="Dismissed" TChecked="string" ValueChange="OnValueChange"></SfRadioButton>

    </div>

  </div>

</div>

 

@code{

    private void OnValueChange(ChangeArgs<string> args)

    {

      var Selected_item = args.Value;

    }

}

Could you please check the above code and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

[Alex]

Thanks

[YuvanShankar Arunagiri]

You are welcome, Alex. We are happy to hear that your requirement has been fulfilled. Please get back to us if you need any further assistance on this.

[Rainer Prem]

Apparently, something got damaged in the meantime. I downloaded the Solution above, and migrated it to net8.0 and Syncfusion 30.2.7

I cannot create a ValueChange-callback any longer.

Argument 2: cannot convert from 'method group' to 'Microsoft.AspNetCore.Components.EventCallback'

This happens with "void OnvalueChange( ChangeArgs<string>)" or "Task ..."

Attachment: SyncfusionBlazorApp_ad6e736b.zip

[YuvanShankar Arunagiri]

Hi Rainer,

We have validated the issue you reported using the sample you provided. For further clarification, when using the ValueChange event of the Radio Button component, it is necessary to define the TChecked property. This requirement has already been addressed in the solution shared earlier in this forum.

SfRadioButton TChecked="string" Label="Unspecified" Name="status" Value="Unspecified" @bind-Checked="@CheckedValue" ValueChange="OnValueChange"></SfRadioButton>

…

void OnValueChange (ChangeArgs<string> args)

{

    Debug.WriteLine( "ValueChange " + args.Value + " CheckedValue = " + CheckedValue );

}

Output screenshot:

Please get back to us if you have any concerns or need further clarification.

Regards,

YuvanShankar A

Attachment: SyncfusionBlazorApp_fd61428b.zip

[Rainer Prem]

That did the magic. Thanks. I didn't see that change in the example above, because only the ValueChange part was marked yellow.

[Shereen Shajahan]

Hi Rainer,

Thank you for the update. Please get back to us for assistance in the future.

Regards,

Shereen