剑道网格层次结构数据不显示答案

【问题标题】：Kendo grid hierarchy data not displaying剑道网格层次结构数据不显示
【发布时间】：2015-10-12 18:49:23
【问题描述】：

我有一个使用 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
        }
      ]
    }
  ]
});

黄色突出显示的部分是应显示层次结构数据的位置。

【问题讨论】：

您遇到错误了吗？

标签： javascript mvvm typescript kendo-grid

【解决方案1】：

这是我尝试过的link。

我认为层次网格不是创建的，但实际上，它是嵌套在主网格中创建的。您的屏幕截图未显示网格的右侧部分，但您可能在网格右侧有 2 个滚动箭头，可让您查看子网格内容。

删除style="height: 55%" 解决了这个问题。

注意我不确定我是否正确地重现了您的问题...在您的屏幕截图中，您确实显示了另一个主记录，因此子网格通常会显示在这两个主记录之间。如果高度样式是卷轴问题，那么第二个主记录也将被隐藏。如果我错了，请随时更新我的示例以重现您的问题。

【讨论】：