我正在努力理解KendoUI网格的工作原理。我已经成功地从服务器返回了分页数据,服务器端分页也在工作。
但我在动态设置列详细信息时遇到了问题,即既不显示标题也不显示模板,列标题显示绑定字段的名称。我认为这个问题与列何时初始化有关,因为我在从服务回调后了解了列的详细信息。
以下是我如何绑定网格:
$("#kGrid").kendoGrid({
dataSource: {
serverPaging: true,
schema: {
data: "data",
total: "total"
},
pageSize: 10,
transport: {
read: function(options) {
var searchParam = new Model.SearchParamsCM('QuoteDomainTasks', 'QuoteList', false, options.data.page, options.data.pageSize);
seHttpService.GetWithParms('/spa/api/genericrequest', searchParam)
.then(function (result) {
var data = oThis.createJSONFromResults(result.data, oThis);
options.success(data);
},
function(result) {
options.error(result);
});
}
}
},
columns: oThis._gridColumns,
scrollable: false,
pageable: { "refresh": true, "pageSizes": true },
sortable: true,
filterable: true
});
这个在哪里_gridColumns填充在oThis.createJSONFromResults中。此代码位于TypeScript中。
数据源仅用于读取网格的内容,而不是其配置(在设置网格时只需要创建一次)。您需要将这两个关注点分开,以便在调用$("#kGrid").kendoGrid()
时oThis._gridColumns
具有列定义。
Kendo Grid并不真正支持动态更改列定义,因此如果您需要,您可以选择:
- 只要列定义必须更改,就重新创建整个轴网
- 手动更改内容(例如,如果只有标题更改,则可以通过jQuery选择和编辑元素来完成更改)
- 试着弄乱内部,例如下面这样的东西
(注意,这在很大程度上是未经测试的,可能会与新的剑道UI版本决裂)
grid.options.columns = changedColumnDefinition;
grid.table.find(">thead").empty();
grid._columns(grid.options.columns);
grid._thead();