私は KendoUI Grid を持っています。一部の列では、クリックしてドロップダウン リスト メニューから値を選択できます。
問題は、グリッドにいくつかの新しい行を追加し、特定の列のドロップダウンからオプションを選択し始めると、選択速度が指数関数的に遅くなるように見えることです。
たとえば、4 つの行を追加し、最初の行の列に何かを選択すると、速度は問題ありません。次に、2 行目のドロップダウンの 1 つから何かを選択すると、少し遅くなります。次に、3行目または4行目に何かを選択すると、途方もなく遅くなります。
インスペクターですべてをチェックアウトしましたが、メモリ使用量は問題なく、巨大な ajax リクエストはありません。タスク マネージャーを見ると、選択範囲がフリーズするまで CPU 使用率が 100% になっていることがわかります。
これは私のドロップダウンの1つです(それらはすべてほとんど同じです):
function conditionDropdown(container, options)
{
$('<input required data-text-field="conditionName" data-value-field="conditionId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: [{
conditionName: "Used",
conditionId: 2
}, {
conditionName: "New",
conditionId: 1
}]
})
}
そして私の KendoUI グリッド:
$('#partsGrid').kendoGrid({
dataSource: {
data: partData,
pageSize: 10,
autoSync: true,
schema: {
model: {
fields: {
id: {
type: "number",
editable: false
},
quantity: {
type: "number",
},
partNumber: {
type: "string",
},
manufacturer: {
type: "string",
},
partTypes: {
defaultValue: {
partTypeId: 1,
partType: "Unknown"
}
},
jobTypes: {
defaultValue: {
jobTypeId: 2,
jobType: "Supply"
}
},
conditions: {
defaultValue: {
conditionId: 1,
conditionName: "New"
}
},
urgency: {
defaultValue: {
urgencyId: 3,
urgencyName: "Standard"
}
},
leadtimes: {
defaultValue: {
leadtimeId: 3,
leadtimeName: "Standard"
}
}
}
}
}
},
columns: [
{
field: 'quantity',
width: 40,
title: 'Qty',
},
{
field: 'partNumber',
width: 120,
title: 'Part number',
editor: partNumberScanner
},
{
field: 'manufacturer',
width: 120,
title: 'Manufacturer',
},
{
field: 'partTypes',
width: 80,
title: 'Part type',
editor: partTypeDropdown,
template: "#=partTypes.partType#"
},
{
field: 'jobTypes',
width: 80,
title: 'Job type',
editor: jobTypeDropdown,
template: "#=jobTypes.jobType#"
},
{
field: 'conditions',
width: 70,
title: 'Condition',
editor: conditionDropdown,
template: "#=conditions.conditionName#"
},
{
field: 'urgency',
width: 100,
title: 'Urgency',
editor: urgencyDropdown,
template: "#=urgency.urgencyName#"
},
{
field: 'leadtimes',
width: 100,
title: 'Lead time',
editor: leadtimeDropdown,
template: "#=leadtimes.leadtimeName#"
}
],
editable: {
update: true,
destroy: true,
confirmation: false
},
toolbar: [
{
name: "create",
text: "Add part",
className:"k-grid-insert-expense"
}
]
})
$(".k-grid-insert-expense").bind("click", function (ev) {
grid.addRow();
});
grid = $('#partsGrid').data("kendoGrid");
grid.dataSource.bind("sync", function(e) {
parts = grid.dataSource.data();
partData = parts;
grid.dataSource.success(parts);
});
autoSync
グリッドで falseに変更すると、dataSource
すべての速度の問題が解決しますが、これにより、望ましい動作のいくつかが中断されます。
さらにテストした結果、次の行がスローダウンの原因となっているようです。
grid.dataSource.success(parts);
理由を知っている人はいますか?