最近 Kendo UI に問題があります。1 つのデータソースがあり、3 つのグリッドで使用されています。これはすべて機能していますが、何らかの理由で、より良い言葉がないためにグリッドのスタイリングが「解体」されています。
グリッド A からデータソースをフィルター処理すると、グリッド A は適切に見えますが、グリッド B と C は次のようになります (列の最初の名前「エラー」は気にしないでください)。
グリッド B からデータソースをフィルタリングすると、グリッド B は適切に表示されますが、グリッド A と C は「解体」されたように見えます。何が問題なのですか?
グリッド A:
$('#grid-a').kendoGrid({
autoBind: false,
dataSource: emp_ds,
toolbar: kendo.template($("#mainlist-template").html()),
scrollable: true,
sortable: true,
selectable: 'row',
pageable: {
input: true,
},
columns: [{
field: "id",
title: "ID",
width: 100
},{
field: "firstname",
title: "Firstname"
},{
field: "lastname",
title: "Lastname"
}
]
});
グリッド B:
$('#grid-b').kendoGrid({
autoBind: false,
dataSource: emp_ds,
toolbar: kendo.template($("#emplist-template").html()),
scrollable: true,
sortable: true,
selectable: 'row',
pageable: {
input: true,
},
columns: [{
field: "id",
title: "ID",
width: 100
},{
field: "firstname",
title: "Firstname"
},{
field: "lastname",
title: "Lastname"
},{
command: {
text: 'Select',
click: function(e) {
e.preventDefault();
if(employeeSelectSwitch == 2) {
return;
}
varholder.curUid = $(e.currentTarget).closest("tr").data('uid');
$('#daterange-dialog').data('kendoWindow').center().open();
}
},
width: 140
}]
});
情報源:
emp_ds = new kendo.data.DataSource({
transport: {
read: {
dataType: 'json',
url: url.employeeList
}
},
schema: {
model: {
fields: {
id: { type: 'number' },
firstname: { type: 'string' },
lastname: { type: 'string' },
}
}
},
pageSize: 15
});