剑道UI输入焦点-在选择和Ajax调用之后，下拉列表保留焦点

我们有一个带有下拉列表和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上。那里也没有爱情。

在任何情况下，下拉列表都会顽固地保持输入焦点。

问题是NumericTextbox不会将自己更新为Ajax调用后设置的值，直到有人实际单击该字段。当AJAX调用返回时，我们这样做:

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

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

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

谢谢你的帮助。

---

雷曼

乍得

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

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