I cannot successfully migrate this code to Kendo UI:
<
div
class
=
"form-group"
>
<
div
class
=
"col-md-3 col-lg-offset-2"
>
@Html.RadioButtonFor(m => m.IsNewDeveloper, false, new { @onchange = "chooseExisting(event)" }) Choose from existing developers
</
div
>
<
div
class
=
"col-md-3"
>
@Html.RadioButtonFor(m => m.IsNewDeveloper, true, new { @onchange = "addNew(event)" }) Add a new developer
</
div
>
</
div
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.AssignedDeveloper.Email, new { @class = "col-md-2 control-label" })
<
div
class
=
"col-md-10"
>
@Html.DropDownList("ExistingDeveloper", new SelectList(Model.DeveloperEmails), "Select an email", new { @class = "form-control", @onchange = "existingDevSelected(event)" })
@Html.TextBoxFor(m => m.AssignedDeveloper.Email, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.AssignedDeveloper.Email)
</
div
>
</
div
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.AssignedDeveloper.FirstName, new { @class = "col-md-2 control-label" })
<
div
class
=
"col-md-10"
>
@Html.TextBoxFor(m => m.AssignedDeveloper.FirstName, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.AssignedDeveloper.FirstName)
</
div
>
</
div
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.AssignedDeveloper.LastName, new { @class = "col-md-2 control-label" })
<
div
class
=
"col-md-10"
>
@Html.TextBoxFor(m => m.AssignedDeveloper.LastName, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.AssignedDeveloper.LastName)
</
div
>
</
div
>
<
script
type
=
"text/javascript"
>
$(function () {
if ('@Model.IsNewDeveloper' === 'True') {
addNew();
} else {
chooseExisting();
}
});
function chooseExisting(e) {
$('input#AssignedDeveloper_Email').hide();
$('select#ExistingDeveloper').show();
$('#AssignedDeveloper_FirstName').attr('readonly', 'readonly');
$('#AssignedDeveloper_LastName').attr('readonly', 'readonly');
// if was triggered by user, clear previous values
if (e) {
if ($('select#ExistingDeveloper').val()) {
existingDevSelected();
} else {
$('#AssignedDeveloper_FirstName').val('');
$('#AssignedDeveloper_LastName').val('');
}
}
}
function addNew(e) {
$('select#ExistingDeveloper').hide();
$('input#AssignedDeveloper_Email').show();
$('#AssignedDeveloper_FirstName').removeAttr('readonly');
$('#AssignedDeveloper_LastName').removeAttr('readonly');
// if was triggered by user, clear previous values
if (e) {
$('input#AssignedDeveloper_Email').val('');
$('#AssignedDeveloper_FirstName').val('');
$('#AssignedDeveloper_LastName').val('');
}
}
function existingDevSelected() {
// populate email input with the selected one
var selectedEmail = $('select#ExistingDeveloper').val();
$('input#AssignedDeveloper_Email').val(selectedEmail);
// populate first and last names
$.post('@Url.Action("GetDeveloperNames", "Licenses")' + '?email=' + selectedEmail, getAntiForgery())
.done(function (res) {
if (res.firstName && res.lastName) {
$('#AssignedDeveloper_FirstName').val(res.firstName);
$('#AssignedDeveloper_LastName').val(res.lastName);
} else {
// if for some reason a user is not found with this email, go to adding a new user
addNew();
$('#AssignedDeveloper_FirstName').val('');
$('#AssignedDeveloper_LastName').val('');
}
});
}
</
script
>
Here is the new version:
<
div
class
=
"form-group"
>
@Html.Label(" ", new { @class = "col-md-2 control-label" })
<
div
class
=
"col-md-3"
>
@Html.Kendo().RadioButtonFor(m => m.IsNewDeveloper).Checked(false).HtmlAttributes(new { onchange = "chooseExisting(event)"}) Choose from existing developers
</
div
>
<
div
class
=
"col-md-3"
>
@Html.Kendo().RadioButtonFor(m => m.IsNewDeveloper).Checked(true).HtmlAttributes(new { onchange = "addNew(event)"}) Add a new developer
</
div
>
</
div
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.AssignedDeveloper.Email, new { @class = "col-md-2 control-label" })
<
div
class
=
"col-md-10"
>
@Html.Kendo().DropDownList().BindTo(Model.DeveloperEmails).OptionLabel("Select an email").Name("ExistingDeveloper").Events(e=>e.Change("existingDevSelected")).HtmlAttributes(new { style = "width: 280px" })
@Html.Kendo().TextBoxFor(m => m.AssignedDeveloper.Email).HtmlAttributes( new {style = "width: 280px"} )
@Html.ValidationMessageFor(m => m.AssignedDeveloper.Email)
</
div
>
</
div
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.AssignedDeveloper.FirstName, new { @class = "col-md-2 control-label" })
<
div
class
=
"col-md-10"
>
@Html.Kendo().TextBoxFor(m => m.AssignedDeveloper.FirstName).HtmlAttributes( new { style = "width: 280px" })
@Html.ValidationMessageFor(m => m.AssignedDeveloper.FirstName)
</
div
>
</
div
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.AssignedDeveloper.LastName, new { @class = "col-md-2 control-label" })
<
div
class
=
"col-md-10"
>
@Html.Kendo().TextBoxFor(m => m.AssignedDeveloper.LastName).HtmlAttributes(new{ style = "width: 280px"})
@Html.ValidationMessageFor(m => m.AssignedDeveloper.LastName)
</
div
>
</
div
>
The javascript code is not called properly. Why?
I'm attaching the original working code. Thanks,
Alberto