剑道UI输入焦点-选择和Ajax调用后，DropdownList保留焦点

Question

我们有一个带有下拉列表和Telerik Kendo UI控件的表单（以及Telerik网格）。

当用户从下拉列表中进行选择时，将向MVC控制器动作发出一个ajax调用，该动作将发回更多数据，这些数据将部分填写表单。其中一个字段用Kendo UI NumericTextBox表示。

要求是在数据返回时在此NumericTextbox上设置输入焦点。

然而，这似乎在我尝试的任何场景中都不起作用。

下面是如何在页面上定义数字文本框：

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

以下是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"); })

函数的变化如下：

 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 () {

                }
            });            
        }
    }
}

相关部分是在ajax调用返回后尝试将焦点设置在“ApplyFromPOA”控件上。这不工作。下拉列表保留焦点。

我还尝试使用网格的“sync”事件调用一个特殊函数，该函数将在“ApplyFromPOA”NumericTextBox上设置输入焦点。那里也没有爱。

在任何情况下，DropdownList都会顽固地保留输入焦点。

问题是NumericTextbox不会将自身更新为Ajax调用后设置的值，直到有人实际单击该字段。当AJAX调用返回时，我们将执行以下操作：

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

理想情况下，我们无论如何都需要在数字文本框上输入光标。

谢谢你的帮助。

乍得雷曼

Answer 1

Kendo NumericTextBox实际上做了一件非常令人讨厌的事情，并将您现有的

您要做的是使用小部件实例而不是输入元素。

在您的成功回调中，不要使用jQuery函数，如. val（）和. point（），而是将其替换为：

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

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

    // set focus
    applyFromPoaWidget.focus();
}