我正在尝试创建一个网格层次结构,如下所示:http://demos.telerik.com/kendo-ui/web/grid/hierarchy.html。
我的基本结构是我从一个触发detailInit的html表初始化了一个主网格,并生成一个子网格。子网格从控制器方法读取,该方法返回JSON。我已经验证控制器方法返回正确的,有效的JSON,但子网格只显示列标题,表格的行中没有任何数据。我得到的唯一例外是javascript异常:
Uncaught TypeError: undefined is not a function
控制器方法:
public JsonResult GetDBA(string DBAName, [DataSourceRequest] DataSourceRequest request)
{
return Json(repository.DBAs
.Where(m => m.DBAName == DBAName)
.ToDataSourceResult(request));
}
返回示例JSON:
{
"Data": [
{
"DBAId": 25,
"DBAName": "adam's hotdog store",
"LegalEntity": "adam",
"BusinessPhone": "1234567890",
"AlternatePhone": null,
"EmailAddress": "test@email.com",
"Address": null,
"EIN": null,
"DBAs": null,
"Products": [],
"ProductsList": null,
"SelectedProductIds": null
}
],
"Total": 1,
"AggregateResults": null,
"Errors": null
}
表,它构成主网格的数据源:
<table id ="grid">
<thead>
<tr>
<th data-field="DBAName">
DBA
</th>
// ...
</tr>
</thead>
<tbody>
@foreach (AppStatus.Domain.Entities.Contract contract in Model) {
<tr>
<td>@contract.DBA.DBAName</td>
//...
</tr>
}
</tbody>
</table>
从上面定义的表中初始化Kendo Grid:
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
sortable: true,
dataSource: {
schema: {
model: {
fields: {
Aging: {type: "number"}
}
}
},
pageSize: 8
},
detailInit: detailInit,
pageable: true,
resizable: true
});
将网格绑定到onDataBound函数:
function onDataBound(e) {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
var grid = $("#grid").data("kendoGrid");
grid.bind("dataBound", onDataBound);
detailInit:
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
transport: {
read: {
dataType: "json",
type: "POST",
url: "/Admin/GetDBA",
data: {"DBAName": e.data.DBAName}
}
}
},
columns: [
{ field: "LegalEntity" },
{ field: "BusinessPhone" },
{ field: "AlternatePhone" }
]
});
}
答案 0 :(得分:1)
我终于让它工作了,但我仍然不知道为什么我以前的功能没有显示数据。这是我最后的工作职能:
function detailInit(e) {
$.ajax({
type: "POST",
url: "/Admin/GetDBA",
data: { DBAName: e.data.DBAName }
})
.done(function (data) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: data.Data,
columns: [
{ field: "LegalEntity" },
{ field: "BusinessPhone" },
{ field: "AlternatePhone" }
]
});
});
}