CODEWITHSUNDEEP
c#javascriptasp.net-mvckendo-uitelerik-mvc
Chad Lehman
Chad Lehman

Reputation: 952

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

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

Upvotes: 1

Views: 4476

Answers (1)

CodingWithSpike
CodingWithSpike

Reputation: 43728

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();
}

Upvotes: 2

Related Questions