Kendo UI input focus - After selection and Ajax call, DropdownList retains focus

Question

We have a form with a dropdownlist and a mix of Telerik Kendo UI controls on it (as well as a Telerik Grid).

When the user makes a selection from the dropdown, an ajax call is made to an MVC controller action which sends back more data that will partially fill out the form. One of these fields is represented with a Kendo UI NumericTextBox.

The requirement is to set input focus on this NumericTextbox when the data returns.

However, this doesn't appear to be working in any scenario I try.

Here is how the numeric textbox is defined on the page:

@Html.Kendo().NumericTextBoxFor(model => model.ApplyFromPOA).Name("ApplyFromPOA").Step(0.01m).Min(0.00m).HtmlAttributes(new { @style = "width: 100%", @id = "ApplyFromPOA", @class = "defaultfocus" })

Here is the definition of the dropdownlist:

@Html.Kendo().DropDownList().Name("AddPaymentCustomer").BindTo(@Model.CustomerList).DataTextField("Name").DataValueField("ID").HtmlAttributes(new { style = "width: 100%; max-width: 300px;" }).Events(e => { e.Change("changeCustomerInAddPaymentWindow"); })

The changeCustomerInAddPaymentWindow function looks like this:

 function changeCustomerInAddPaymentWindow (e) {

    var dataItem = getSelectedDataItemFromDropdown(e);
    var datagrid = $('#MyCustomerInvoiceResults').data('kendoGrid');
    var dataSource = datagrid.dataSource;


    if (null != dataItem) {
        if (dataItem.ID == 0) {

            // Clear out the form

            clearOutForm();
        }
        else {

            $.ajax({
                url: "/Home/GetCustomerAndInvoices",
                type: 'POST',
                data: {
                    customerId: dataItem.ID
                },
                success: function (updatedModel) {


                    $("#ApplyFromPOA").val(updatedModel.ApplyFromPOA);
                    $("#poaAvailable").val(updatedModel.POAStringNoCommas);
                    $("#POAString").html(updatedModel.POAString);
                    $("#amount-left").html(updatedModel.POAString);

                    $.each(updatedModel.Invoices, function (index, item) {
                        dataSource.add(item);
                    });

                    dataSource.sync();

                    setTimeout(function () {
                        $("#ApplyFromPOA").select();
                        $("#ApplyFromPOA").focus();
                        $("#ApplyFromPOA").find("input").focus(0, function () { });
                    }, 200);

                },
                error: function () {

                }
            });            
        }
    }
}

The relevant part is the attempt to set focus on the "ApplyFromPOA" control after the ajax call returns. This does not work. The dropdownlist retains focus.

I've also tried to use the 'sync' event of the grid to call a special function that will set the input focus on the "ApplyFromPOA" NumericTextBox. No love there either.

In every case, the DropdownList stubbornly retains input focus.

The problem is that the NumericTextbox will NOT update itself to the value that is set after the Ajax call until someone actually clicks into the field. When the AJAX call returns, we do this:

$("#ApplyFromPOA").val(updatedModel.ApplyFromPOA);

That sets the value correctly internally, but until someone sets the cursor on the control, it continues to display the previous value.

Ideally, we need to have the cursor input on that numeric text box anyway.

Thanks for your help.

Chad Lehman

20th Century Fox Senior Dev/Architect Enterprise IT team

score 2 · Accepted Answer · answered Aug 22 '14 at 19:56

2

The Kendo NumericTextBox actually does a really obnoxious thing and takes your existing <input> and sets it to display:none;, then makes a second <input> over top of it. Behind the scenes in JS it copies the value back and forth between the inputs.

What you want to do is work with the widget instance instead of the input elements.

Inside your success callback, instead of using jQuery functions like .val() and .focus() replace it with:

success: function (updatedModel) {
    // get Kendo widget instance
    var applyFromPoaWidget = $("#ApplyFromPOA").data("kendoNumericTextBox");

    // set new value
    applyFromPoaWidget.value(updatedModel.ApplyFromPOA);

    // set focus
    applyFromPoaWidget.focus();
}

answered Aug 22 '14 at 19:56

CodingWithSpike

42,906
18
101
138

Thanks man! I was just coming upon the same conclusion from a different S/O post: http://stackoverflow.com/questions/14463759/how-can-i-refresh-value-kendo-numerictextbox But you answered it succinctly and gave me a much clearer answer. Thanks again. – Chad Lehman Aug 22 '14 at 19:58
Glad I could help. Shameless plug, but I also have a bunch of useful Kendo posts on my blog: http://codingwithspike.wordpress.com – CodingWithSpike Aug 22 '14 at 20:00
Sweet. I'll check it out. – Chad Lehman Aug 22 '14 at 20:10
And, yes, it is VERY obnoixious – Prisoner ZERO Aug 08 '17 at 13:33

Kendo UI input focus - After selection and Ajax call, DropdownList retains focus

1 Answers1