Cannot migrate standard RadioButtons and DropDowns to Kendo UI

[Alberto]

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

[Ivan Danchev]

Hello Alberto,

I assume the AssignLicense.cshtml view in the attachment is a partial view. If that is so, move the script tag that contains the event handlers (existingDevSelected, addNew, etc.) before the components declarations, for example move it before the form:

<script type="text/javascript">
//...
</script>

@using (Html.BeginForm("AssignLicense", "Licenses", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))

Event handlers of components initialized in partial views must be present on the page before the components declarations.

Give this a try and let us know whether the handlers are called as expected.

Regards,
Ivan Danchev
Progress Telerik

[Alberto]

Hi Ivan,

 

No, it is not a partial view. It has to be something else, like Kendo JavaScript syntax to identify input controls.

Thanks,

Alberto

[Ivan Danchev]

Hi Alberto,

By "not called properly" I thought you mean that the events don't fire and you don't get to the event handlers.

I tested the RadioButtons and the DropDownList and at my end all three handlers (chooseExisting, addNew and existingDevSelected) are fired. The problem comes from trying to use the previous syntax for getting the DropDownList: $('select#ExistingDeveloper')

This will not work for the Kendo DropDownList, since it does not render a select element. So make the following changes (highlighted) in the 3 functions:

<script>
	function chooseExisting(e) {
		$('input#AssignedDeveloper_Email').hide();
		//$('select#ExistingDeveloper').show();
		var ddl = $('#ExistingDeveloper').data("kendoDropDownList");
		var wrapper = ddl.wrapper.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()) {
			if (ddl.value()) {
				existingDevSelected();
			} else {
				$('#AssignedDeveloper_FirstName').val('');
				$('#AssignedDeveloper_LastName').val('');
			}
		}
	}

	function addNew(e) {
		console.log("add")
		//$('select#ExistingDeveloper').hide();
		var ddl = $('#ExistingDeveloper').data("kendoDropDownList");
		var wrapper = ddl.wrapper.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();
		var ddl = $('#ExistingDeveloper').data("kendoDropDownList");
		//get the ddl value:
		var selectedEmail = ddl.value();
		//get the ddl text 
		//var selectedEmail = ddl.text();

		$('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>

The replaced original lines are commented.

Regards,
Ivan Danchev
Progress Telerik

[Alberto]

Thanks for the accurate answer Ivan, by the way the page still does not work. I guess I need an additional tool to debug properly this javascript code. What should I use?

Thanks,

Alberto

 

[Ivan Danchev]

Hi Alberto,

Attached you can find a sample runnable project that has the DropDownList and RadioButtons in the AssignLicense.cshtml view. I don't see any issue with the components and their events. Give it a try and let me know whether I am missing something.

As for debugging the js logic, there is no need for any specific tool. You can place a debugger; in the event handlers and check the values you need in the browser dev tools console when the respective events fire.

Regards,
Ivan Danchev
Progress Telerik

[Alberto]

The attached app, display an empty page. Is this correct?

Thanks,

Alberto

[Ivan Danchev]

Alberto,

This is the Index.cshtml view, which is empty. The DropDownList and the RadioButtons are in the AssignLicense.cshtml view. So once you run the project navigate to http://localhost:55964/Home/AssignLicense Alternatively, right click the AssignLicense.cshtml view and select "View in browser".

Regards,
Ivan Danchev
Progress Telerik

[Alberto]

Hi Ivan,

Please check the image attached, it does not work as before. Only one of the email fields should be visible at time.

Thanks,

Alberto

 

[Ivan Danchev]

Hi Alberto,

There is no logic implemented to hide the DropDownList when the page loads. So add a document.ready handler and hide the DropDownList initially:

$(document).ready(function () {
	var ddl = $('#ExistingDeveloper').data("kendoDropDownList");
	ddl.wrapper.hide();
})

Regards,
Ivan Danchev
Progress Telerik