RadioGroupFor value binding

[Bas]

I have been trying to figure out why the model value is not binding to the RadioGroupFor control.

For instance:

@Html.Kendo().RadioGroupFor(m => m.Auth).BindTo(BoolYesNo.Items).Layout(RadioGroupLayout.Horizontal)

What am I doing wrong?

[Alexander]

Hi Bas,

Thank you for the provided information.

In general, the .BindTo() configuration option has two overloads are used for binding initial values to the component. You can notice this within the RadioGroupBuilder class definition. For example:

    public class RadioGroupBuilder : WidgetBuilderBase<RadioGroup, RadioGroupBuilder>
    {
        public RadioGroupBuilder(RadioGroup component);

        public RadioGroupBuilder BindTo(string[] values);
        public RadioGroupBuilder BindTo(IEnumerable<IInputGroupItem> values);
        ...
    }

Having this in mind, as mentioned in the RadioGroup Overview Demo it is suggested that the collection implements the "IInputGroupItem", as it gives a more versatile approach such as applying CSS classes, labels, values, and various HTML attributes to a particular item.

With that said, in order for the binding to be successful I would recommend making sure:

• Generate and store the collection of items that will be displayed upon the RadioGroup's rendering (highlighted in green).
• Within the Model provide a "Value" property that will hold the desired RadioGroup (highlighted in orange).

Here is an example:

ViewModel:

    public class CustomViewModel
    {
        public string Value { get; set; } // will hold the RadioGroup value
    }

Controller:

 public IActionResult Index()
 {
     var itemsList = new List<IInputGroupItem>()
     {
         new InputGroupItemModel ()
         {
             Label = "Green",
             Enabled = true,
             CssClass = "green",
             Encoded = false,
             Value = "1"
         },
          new InputGroupItemModel ()
         {
             Label = "Blue",
             Enabled = true,
             Encoded = false,
             CssClass = "blue",
             Value = "2"
         },
           new InputGroupItemModel ()
         {
             Label = "Red",
             Enabled = true,
             Encoded = false,
             CssClass = "red",
             Value = "3"
         }
     };

     ViewData["items"] = itemsList; //stores the items data
     var model = new CustomViewModel() { Value = "2"}; 

     return View(model);
 }

View:

@model TelerikAspNetCoreApp65.Models.CustomViewModel

@(Html.Kendo().RadioGroupFor(m=>m.Value).BindTo((IEnumerable<IInputGroupItem>)ViewData["items"]).Layout(RadioGroupLayout.Horizontal))

For additional information, you can refer to the following documentation:

RadioGroup Binding

I hope you find this helpful.

Regards,
Alexander
Progress Telerik

[Bas]

Alexander,

Many thanks for looking into the issue and providing an insightful response. However, all the info you provided is all well understood. There are two differences I see between your example and our implementation.

1. We only initialize the Label and Value of our InputGroupItemModel; the rest are nulls
2. Our model type is nullable bool, but we also have another case with string, and the results are the same.

I'll try to set the other members on the InputGroupItemModel and see whether it makes any difference.

Please let me know if anything stands out to explain our behavior.

Bas

[Bas]

As I suspected, setting the other values on the IInputGroupItem makes no difference. I suspect an initialization issue.

Is there a scenario where the widget's init is not activated?

[Alexander]

Hi Bas,

Currently, binding the RadioButtonGroupFor to bool fields is not supported. If you consider a viable feature that needs to be implemented you can log a feature request in our feedback portal.

Nevertheless, a possible workaround would be to True and False as string options for the RadioGroup and cast them to bool on the server. In this regard, you can review the following StackOverflow thread that gives several approaches for conversion from string to bool values on the server.