Kendo RadioButtonFor collection binding

2 Answers 1752 Views
Button
Hesham Tabbach
Top achievements
Rank 1
Hesham Tabbach asked on 29 Dec 2017, 03:58 PM

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?

 

2 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 02 Jan 2018, 01:52 PM
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:

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Hesham Tabbach
Top achievements
Rank 1
commented on 02 Jan 2018, 05:18 PM

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?

0
Dimitar
Telerik team
answered on 04 Jan 2018, 09:30 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Button
Asked by
Hesham Tabbach
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Share this question
or