我无法让 Kendo Grid 从服务器端数据填充。
我有一个网格构建器功能如下:
var build = function (carrier, date) {
var urlBase = 'my base url';
var datasource = new kendo.data.DataSource({
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
schema: {
model: {
id: 'Id',
fields: {
StatementDate: { type: "string", editable: false },
CobDate: { type: "string", editable: false },
//lots more fields
Status: { type: "string", editable: false },
Matched: { type: "boolean", editable: true }
}
}
},
transport: {
read: function (options) {
var address = urlBase + '/' + carrier + '/' + date;
$.ajax({
url: address,
type: "POST",
data: JSON.stringify(options.data),
contentType: "application/json",
success: function (result) {
options.success(result);
},
error: function (result) {
options.error(result);
}
});
},
//update function omitted
parameterMap: function (data, operation) {
if (operation == "read") {
return JSON.stringify(data)
}
},
change: function (e) {
var data = this.data();
console.log(data.length); // displays "77"
}
}
});
return datasource;
};
return {
build: build
}
网格定义
elem.kendoGrid({
columns: [
{ field: "StatementDate", title: "State Date", width: 125 },
{ field: "CobDate", title: "COB Date", width: 100 },
//lots more fields
{ command: ["edit"], title: " ", width: "85px"}],
resizable: true,
sortable: true,
editable: "inline",
columnMenu: true,
filterable: true,
reorderable: true,
pageable: true,
selectable: "multiple",
change: this.onSelectedRecordChanged,
toolbar: kendo.template($('#' + templateName).html()),
scrollable: {
virtual: true
},
height: 800
});
我通过单击按钮触发更新。当我查看响应时,我看到了数据。看起来不错,但网格不会显示数据。当数据完全是客户端时,它以前工作得很好。
如果我在 AJAX 回调上断点。我看到了正确的结果。
网格与数据绑定绑定。数据源是视图模型上的属性。
<div id="grid" data-bind="source: dataSource"></div>
在应用程序的开始。我创建视图模型
var viewModel= kendo.observable(new GridViewModel(...
并绑定
kendo.bind($('#grid'), viewModel);
如果我查看附加到网格的数据源,我会按预期看到页面的数据
当数据是客户端时,这以前工作得很好。
我尝试在数据源上使用 read(),在网格上使用 refresh() 方法。两者似乎都不起作用。
来自服务器的示例响应内容
{"Data":[{"Id": //lots more fields, 20 records],"Total":90375,"AggregateResults":null,"Errors":null}
非常感谢任何帮助。