我有一个使用Kendo Grid的MVVM应用程序,我想显示层次结构(嵌套网格)。我正在尝试复制this example,但我无法显示层次结构数据。如何显示层次结构记录?
cshtml代码:
<div id="custOrderGrid"
data-role="grid"
data-resizable="false"
data-navigatable="true"
data-editable="true"
data-pageable="false"
data-scrollable="true"
onscroll="true"
data-detail-template="child-template"
data-columns="[
{ 'field': 'OrderID', 'title': '<b>Order #', 'width': 65 },
{ 'field': 'LineNo', 'title': '<b>Line Number', 'width': 65 },
{ 'field': 'ItemNo', 'title': '<b>Item Number', 'width': 65 },
{ 'field': 'Desc', 'title': '<b>Description', 'width': 150 }
]"
data-bind="source: orderSearchResults"
style="height: 55%">
</div>
<script id="child-template" type="text/x-kendo-template">
<div data-role="grid"
data-bind="source: obj2"
data-columns="[
{ field: 'name' },
{ field: 'oid' }
]"></div>
</script>
打字稿代码:
orderSearchResults = new kendo.data.DataSource({
schema: {
model: {
id: "OrderID",
fields: {
LineNo: { type: "string" },
ItemNo: { type: "string" },
Description: { type: "string" }
}
}
},
data: [
{
OrderID: "L44ZX4",
LineNo: "15",
ItemNo: "*X1WCJH",
Description: "CDF9X2XSB",
obj2: [
{
name: 'a1',
oid: 1
},
{
name: 'b1',
oid: 2
},
{
name: 'c1',
oid: 3
}
]
}
]
});
黄色突出显示部分是应显示层次结构数据的位置。
答案 0 :(得分:0)
这是我尝试过的link。
我认为没有创建层次结构网格,但实际上,它是嵌套在主网格中创建的。屏幕快照没有显示网格的右侧,但是您可能在网格的右侧有2个滚动箭头,可以查看子网格的内容。
删除style="height: 55%"
可以解决问题。
我不确定我是否正确再现了您的问题...在屏幕快照中,您确实显示了另一个主记录,因此通常在这两个主记录之间显示子网格。如果高度样式是卷轴问题,那么第二个主要记录也将被隐藏。如果我错了,请随时更新示例以重现您的问题。