Kendo RadioButtonFor collection binding

[Hesham Tabbach]

I have a view displaying a collection as follows:

 

@model Portal.Models.ApplicantEmploymentHistoryVM

for (var i = 0; i < Model.ApplicantEmploymentHistories.Count; i++)
{

@Html.Kendo().RadioButtonFor(x => x.ApplicantEmploymentHistories[i].ContactSupervisor).Value(true).Label("Yes")
@Html.Kendo().RadioButtonFor(x => x.ApplicantEmploymentHistories[i].ContactSupervisor).Value(false).Label("No")

}

But the radio buttons aren't checked for the boolean values.  Will it not work with collections?

 

[Dimitar]

Hello Hesham,


When Kendo UI widgets are initialized via the [WidgetName]For method, the Name option is set  automatically. Its value will be used as the id and name HTML attributes of the input element. Thus, with the provided code snippet, all of the radio buttons will have the same id attribute, which is causing the observed behavior.

To bypass the above scenario, please checkout the following Radio Buttons Demo for ASP.NET MVC:

• https://demos.telerik.com/aspnet-mvc/styling/radios
  
  

You will notice that a unique value is set as the Name option, so that a unique id is generated for every input, then the name is overridden by setting the name attribute explicitly. The same can be applied in a loop as follows:

@for (var i = 0; i < model.Histories.Count(); i++)
{
@Html.Kendo().RadioButton().Name(uniqueName).Label(model.Value).Label("Yes").HtmlAttributes(new { @name = "engine" })
@Html.Kendo().RadioButton().Name(uniqueName).Value(model.Value).Label("No").HtmlAttributes(new { @name = "engine" })
}

Regards,
Dimitar
Progress Telerik

[Hesham Tabbach]

Hi Dimitar!

Happy new year and thank you for your reply!

I'm familiar with the type of implementation in your demo.  The reason I was trying to avoid that is because instead of simply saving the model in the controller post method, I'll now have to pass the form collection and parse the values of the radio button and update the model with the value:

So my changes on the form:

@(Html.Kendo().RadioButton()
                .Name("ContactSupervisor" + i)
                .Value(true)
                .Label("Yes")
                .Checked(Model.ApplicantEmploymentHistories[i].ContactSupervisor == true)
                .HtmlAttributes(new { @name = "ContactSupervisor" + i })
                )
@(Html.Kendo().RadioButton()
                .Name("ContactSupervisor" + i)
                .Value(false)
                .Label("No")
                .Checked(Model.ApplicantEmploymentHistories[i].ContactSupervisor == false)
                .HtmlAttributes(new { @name = "ContactSupervisor" + i })
)

 

mean I'll have to do this in my controller method:

[HttpPost]
        public ActionResult submitEmployment(ApplicantEmploymentHistoryVM model, FormCollection collection)
        {
            int applicantId = Convert.ToInt32(model.ApplicantId);

            if (ModelState.IsValid)
            {
                for (int i = 0; i < model.ApplicantEmploymentHistories.Count; i++)
                {
                    model.ApplicantEmploymentHistories[i].ContactSupervisor = Convert.ToBoolean(collection["ContactSupervisor" + i]);
                    dbContext.Entry(model.ApplicantEmploymentHistories[i]).State = System.Data.Entity.EntityState.Modified;

                }

                dbContext.SaveChanges();

                return View("Availability");
            }
            else
            {
                return View("Employment", GetEmploymentViewModel(applicantId));
            }
        }

 

Do you agree or am I missing a trick?

[Dimitar]

Hi Hesham,

Indeed you are correct, that in such scenario the values will have to be parsed on the server and then the respective model fields updated. 

Alternatively, you should be able to directly bind the model values without the need to further process them by using the native RadioButtonFor HtmlHelper. To also maintain your current Kendo UI theme styling for the radio buttons, apply the k-radio and k-radio-label classes. It should look something like this:

for (var i = 0; i < Model.ApplicantEmploymentHistories.Count; i++)
{
  @Html.RadioButtonFor(m => m.ApplicantEmploymentHistories[i].ContactSupervisor, true, new { @class="k-radio" })
  @Html.LabelFor(m => m.ApplicantEmploymentHistories[i].ContactSupervisor, "True", new { @class = "k-radio-label" })

  @Html.RadioButtonFor(m => m.ApplicantEmploymentHistories[i].ContactSupervisor, false, new { @class = "k-radio" })
  @Html.LabelFor(m => m.ApplicantEmploymentHistories[i].ContactSupervisor, "False", new { @class = "k-radio-label" })
}

Regards,
Dimitar
Progress Telerik