This is a migrated thread and some comments may be shown as answers.

Cannot migrate standard RadioButtons and DropDowns to Kendo UI

9 Answers 113 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Alberto
Top achievements
Rank 1
Alberto asked on 21 Feb 2020, 03:16 PM

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

9 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 25 Feb 2020, 02:07 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Alberto
Top achievements
Rank 1
answered on 25 Feb 2020, 03:44 PM

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

0
Ivan Danchev
Telerik team
answered on 27 Feb 2020, 12:39 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Alberto
Top achievements
Rank 1
answered on 27 Feb 2020, 02:05 PM

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

 

0
Ivan Danchev
Telerik team
answered on 02 Mar 2020, 02:52 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Alberto
Top achievements
Rank 1
answered on 06 Mar 2020, 03:59 PM

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

Thanks,

Alberto

0
Ivan Danchev
Telerik team
answered on 10 Mar 2020, 02:25 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Alberto
Top achievements
Rank 1
answered on 12 Mar 2020, 09:09 AM

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

 

0
Ivan Danchev
Telerik team
answered on 13 Mar 2020, 05:19 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Tags
DropDownList
Asked by
Alberto
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Alberto
Top achievements
Rank 1
Share this question
or