我在数据库中有两个视图。奖金和员工。一对多(奖金)。我有 kendo ui 网格(kendo web),它显示来自名为 Bonuses 的控制器的 ajax 结果和一个自动编译元素 - Employee Combobox 与网格的 Employee 字段绑定。
网格的数据源:
// bind json result from /Bonuses/GetPagedJsonBonuses
var bonusesDataSource = new kendo.data.DataSource({
transport: {
read: "@Url.Action("GetPagedJsonBonuses", "Bonuses")",
update: {
url: "@Url.Action("Edit", "Bonuses")",
type: "PUT"
},
create: {
url: "@Url.Action("Create", "Bonuses")",
type: "POST"
},
parameterMap: function(options, operation) {
if (operation === "update" || operation === "create") {
// updates the BonusDTO.EmployeeId with selected value
if (newValueEmployeeId !== undefined)
options.EmployeeId = newValueEmployeeId;
}
return options;
}
},
schema: {
data: "Data", // PagedResponse.Data
total: "TotalCount", // PagedResponse.TotalCount
model: {
id: "BonusId", // Data
fields: {
EmployeeId: { type: "number" },
EmployeeLastName: {
type: "string",
editable: true,
//validation: { required: {message: "Employee's last name is required"}}
},
Amount: {
type: "number",
editable: true,
nullable: false,
validation: {
required: { message: "Amount is required to be set" }
}
}
} // fields
} // model
}// schema
});
网格元素如下所示:
// creates bonuses grid control
$("#bonusesGrid").kendoGrid({
dataSource: bonusesDataSource,
toolbar: ["create"],
editable: "inline",
columns: [
"BonusId",
"EmployeeId",
{
field: "EmployeeLastName",
editor: employeeAutocompletingEditor,
template: "#=EmployeeLastName#"
},
"Amount",
{
command: ["edit"],
title: " "
}
],
save: function(e) {
if (newValueEmployeeId !== undefined && newValueEmployeeLastName !== undefined) {
e.model.EmployeeId = newValueEmployeeId; // it's a hack to bind model and autocomplete control
e.model.EmployeeLastName = newValueEmployeeLastName;
}
},
edit: function(e) {
setCurrentValueEmployeeIdAndLastName(e.model.EmployeeId, e.model.EmployeeLastName);
},
cancel: function(e) {
setCurrentValueEmployeeIdAndLastName(e.model.EmployeeId, e.model.EmployeeLastName);
}
});
自动完成组合框有它自己的使用 ajax 的数据源:
// datasource for autocomlete combobox to lookup employees names from
var employeesDataSource = new kendo.data.DataSource({
transport: {
read: "@Url.Action("GetJsonEmployeesByLastName", "Bonuses")",
},
parameterMap: function(options, operation) {
if (operation === "update" || operation === "create") {
setNewValueEmployeeIdAndLastName(options.Id, options.LastName);
}
return options;
},
});
自动编译组合框看起来像这样:
function employeeAutocompletingEditor(container, options) {
$('<input required data-text-field="LastName" data-value-field="EmployeeId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoComboBox({
// sets the local variables to update values of current row.
change: function() {
setNewValueEmployeeIdAndLastName(this.value(), this.text());
},
dataBinding: function (e) {
console.log("dataBinding: ", e, this.dataItem());
},
dataBound: function (e) {
console.log("dataBound: ", e, this.dataItem());
},
dataSource: employeesDataSource
});
}
我使用编辑器绑定将值(EmployeeId)和文本(EmployeeLastName)从网格传递到组合框。我还使用类似时间变量(newValueEmployeeId,currentValueEmployeeId)的技巧将选定的员工发送到组合框中,并将其传递给网格以进行正确保存。A 发现将值传回网格是最常见的做法。
我的问题是:如果我第一次按网格上的编辑按钮组合框从网格行显示当前员工的姓名:
如果我按下取消按钮并再次按下编辑按钮,组合框不显示网格的当前值(员工姓名)如果我输入一些名称,更改一些其他值和 Udate(保存)值,下次组合框再次显示员工姓名,但在按下取消之前只有一次。
我是剑道 UI 的新手,这个问题让我发疯......我认为组合框失去了它的绑定或不更新。我尝试在 onBound 和 onBinding 事件时设置值,但这无济于事。请帮助我提供建议和示例。
PS所有事件和功能是我尝试调试和寻找解决方案。