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

Question

我们有一个带有下拉列表的表单，上面混合了 Telerik Kendo UI 控件（以及 Telerik Grid）。

当用户从下拉列表中进行选择时，将对 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" })

下拉列表的定义如下：

@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"); })

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”控件上。 这不起作用。下拉列表保持焦点。

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

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

问题在于 NumericTextbox 不会将自身更新为在 Ajax 调用之后设置的值，直到有人真正点击该字段。当 AJAX 调用返回时，我们这样做：

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

在内部正确设置了值，但在有人将光标设置在控件上之前，它会继续显示之前的值。

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

感谢您的帮助。

---

乍得雷曼

20 世纪福克斯 高级开发/架构师 企业 IT 团队

Answer 1

Kendo NumericTextBox 实际上做了一件非常令人讨厌的事情，它将您现有的<input> 设置为display:none;，然后在其上方秒 <input>。 在 JS 的幕后，它在输入之间来回复制值。

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

在您的 success 回调中，不要使用像 .val() 和 .focus() 这样的 jQuery 函数，将其替换为：

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

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

    // set focus
    applyFromPoaWidget.focus();
}