データベースに 2 つのビューがあります。ボーナスと従業員。1 (従業員) 対多 (ボーナス)。ボーナスと呼ばれるコントローラーからのajax結果を表示する剣道UIグリッド（剣道ウェブ）と、グリッドの従業員フィールドにバインドされた従業員コンボボックスの自動コンパイル要素があります。
グリッドのデータソース:
// 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 は、値をグリッドに戻すことが最も一般的な方法であることを発見しました。
私の問題は次のとおりです。グリッドの編集ボタンを初めて押すと、コンボボックスにグリッド行から現在の従業員の名前が表示されます。
[キャンセル] ボタンを押して [編集] ボタンをもう一度押すと、コンボボックスにグリッドの現在の値 (従業員の名前) が表示されません。名前を入力し、他の値を変更して、値を更新 (保存) すると、次にコンボボックスに従業員の名前が再び表示されます。ただし、キャンセルが押される前に一度だけ。
私は Kendo UI の初心者で、この問題に頭がおかしくなりました... コンボボックスがバインディングを失ったか、スムーズに更新されないと思います。onBound および onBinding イベント中に値を設定しようとしましたが、これは役に立ちません。アドバイスと例を教えてください。
PSすべてのイベントと機能は、デバッグして解決策を見つけようとする私の試みです。