У нас есть форма с раскрывающимся списком и набором элементов управления пользовательского интерфейса Telerik Kendo (а также Telerik Grid).
Когда пользователь делает выбор из раскрывающегося списка, выполняется вызов ajax для действия контроллера MVC, которое отправляет обратно больше данных, которые частично заполняют форму. Одно из этих полей представлено 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 () {
}
});
}
}
}
Соответствующая часть - это попытка установить фокус на элементе управления "ApplyFromPOA" после возврата вызова ajax. Это не работает. Выпадающий список сохраняет фокус.
Я также пытался использовать событие «синхронизация» сетки для вызова специальной функции, которая установит фокус ввода на NumericTextBox «ApplyFromPOA». Там тоже нет любви.
В любом случае DropdownList упрямо сохраняет фокус ввода.
Проблема в том, что NumericTextbox НЕ будет обновляться до значения, установленного после вызова Ajax, до тех пор, пока кто-то действительно не щелкнет в поле. Когда вызов AJAX возвращается, мы делаем это:
$("#ApplyFromPOA").val(updatedModel.ApplyFromPOA);
Это устанавливает правильное значение внутренне, но пока кто-то не установит курсор на элементе управления, он продолжает отображать предыдущее значение.
В идеале нам все равно нужно, чтобы курсор вводился в это числовое текстовое поле.
Спасибо за вашу помощь.
Чад Леман
20th Century Fox Senior Dev/Architect Enterprise IT team
