Kendo Hierarchy Grid - Hierarchy无效

Question

我正在尝试在mvvm中创建一个分层网格，经历了多个示例，但没有成功。一定是做错了什么。虽然它没有给出任何异常，但层次结构不起作用，正常的网格正在被填充。

我的虚拟机如下：

​

var PolicyList;
xxx.PayRollProcess.PayRollPolicy = (function ($, kendo, _, App) {

  var vmSalaryPolicy = kendo.observable({
    // Properties
    //*******************************
    Id: null,
    Name: null,
    Description: null,
    CreatedBy: null,
    CreatedDate: null,
    PolicyID: null,
    SaveFieldButtonText: "Save Field",
    PolicyList : new kendo.data.DataSource({
      transport: {
        read: {
          type: "GET",
          url: xxx.Layout.viewModel.GetApiUrl("PayRoll/GetPolicies"),
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          complete: function (data) {
            debugger;
            if (data.responseJSON !== null) {
              vmSalaryPolicy.set("IsRecordFound", data.responseJSON.length > 0 ? true : false);
              vmSalaryPolicy.set("SalryField", data.responseJSON[0]);
            }
          },
          error: function (err) {
            xxx.Layout.viewModel.ShowError(err);
          }
        }
      },
      schema: {
        model: {
          fields: {
            SalaryPolicyID: { type: "number" },
            Name: { type: "string" },
            Description: { type: "string" },
            CreatedBy: { type: "bool" },
            CreatedOn: { type: "string" }
          }
        }
      },
      pageSize: 10
    }),
    AllPolicyFieldDetailList : new kendo.data.DataSource({
      transport: {
        read: {
          type: "GET",
          url: xxx.Layout.viewModel.GetApiUrl("PayRoll/GetAllPayRollPolicyDetails"),
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          complete: function (data) {
            if (data.responseJSON !== null) {
              vmSalaryField.set("IsRecordFound", data.responseJSON.length > 0 ? true : false);
              vmSalaryField.set("SalryField", data.responseJSON[0]);
            }
          },
          error: function (err) {
            xxx.Layout.viewModel.ShowError(err);
          }
        }
      },
      schema: {
        model: {
          fields: {
            SalaryPolicyID: { type: "number" },
            SalaryPolicyName: { type: "bool" },
            SalaryPolicyDescription: { type: "string" },
            SalaryFieldID: { type: "string" },
            SalaryFieldName: { type: "bool" },
            Type: { type: "bool" },
            HeaderName: { type: "string" }
          }
        }
      },
      pageSize: 10
    }),
    dataSource: PolicyList,
    detailInit: function (e) {
      debugger;
      $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
          type: "Get",
          transport: {
            read: {
              type: "GET",
              url: xxx.Layout.viewModel.GetApiUrl("PayRoll/GetAllPayRollPolicyDetails"),
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              complete: function (data) {
                if (data.responseJSON !== null) {
                  vmSalaryPolicy.set("IsRecordFound", data.responseJSON.length > 0 ? true : false);
                  vmSalaryPolicy.set("SalryField", data.responseJSON[0]);
                }
              },
              error: function (err) {
                xxx.Layout.viewModel.ShowError(err);
              }
            }
          },
          serverPaging: true,
          serverSorting: true,
          serverFiltering: true,
          pageSize: 6,
          filter: { field: "SalaryPolicyID", operator: "eq", value: e.data.SalaryPolicyID }
        },
        scrollable: false,
        sortable: true,
        pageable: true,
        columns: [
          { field: "SalaryFieldID", title: "ID", width: "110px" },
          { field: "SalaryFieldName", title: "Field Name", width: "110px" },
          { field: "Type", title: "Type" },
          { field: "HeaderName", title: "Header Name", width: "300px" }
        ]
      });
    },
    dataBound: function (e) {
      debugger;
      e.sender.expandRow(e.sender.tbody.find("tr.k-master-row").first());
    },
  });

  $(function () {
    kendo.bind($("#PolicyPage"), vmSalaryPolicy);
  });
  return { viewModel: vmSalaryPolicy };
})(jQuery, kendo, _, xxx);

​

.cshtml包含：

<div class="box-body rm-padding">
  <div data-bind="invisible: IsRecordFound">No Policy Details found.</div>
  <div id="PayRollPolicyFieldGrid"
       data-role="grid"
       data-sortable="true"
       data-pageable="true"
       data-height="450"
       data-detail-init="detailInit"
       data-columns='[{"field": "SalaryPolicyID"}, {"field": "Name"}, {"field": "Description"}, {"field": "CreatedBy"}, {"field": "CreatedOn"}]'
       data-bind="source: PolicyList, events: { dataBound: dataBound }">
  </div>

</div>

我尝试了示例here

但没那么走运。

它只加载包含策略详细信息的网格。

GetPolicies的JSON：

{
  "ArrayOfSalaryPolicy": {
  "SalaryPolicy": {
    "CreatedBy": "101429",
      "CreatedOn": "2019-01-18T21:01:21.97",
      "Description": "Band A Salary Policy",
      "Name": "Band-A",
      "SalaryPolicyID": "1"
  },
  "_xmlns:i": "http://www.w3.org/2001/XMLSchema-instance",
    "_xmlns": "http://schemas.datacontract.org/2004/07/xxx.Common"
}
}

AllPolicyFieldDetailList的JSON：

{
  "ArrayOfSalaryPolicyField": {
  "SalaryPolicyField": [
    {

      "HeaderID": "0",
      "HeaderName": "OtherDeduction",
      "ID": "5",
      "IsActive": "false",
      "SalaryFieldID": "0",
      "SalaryFieldName": "LWF",
      "SalaryPolicyDescription": "Band A Salary Policy",
      "SalaryPolicyID": "1",
      "SalaryPolicyName": "Band-A",
      "Type": "Deduction"
    },
    {

      "HeaderID": "0",
      "HeaderName": "StatutoryDeduction",
      "ID": "3",
      "IsActive": "false",
      "SalaryFieldID": "0",
      "SalaryFieldName": "PF",
      "SalaryPolicyDescription": "Band A Salary Policy",
      "SalaryPolicyID": "1",
      "SalaryPolicyName": "Band-A",
      "Type": "Deduction"
    },
    {

      "HeaderID": "0",
      "HeaderName": "StatutoryDeduction",
      "ID": "4",
      "IsActive": "false",
      "SalaryFieldID": "0",
      "SalaryFieldName": "TDS",
      "SalaryPolicyDescription": "Band A Salary Policy",
      "SalaryPolicyID": "1",
      "SalaryPolicyName": "Band-A",
      "Type": "Deduction"
    },
    {

      "HeaderID": "0",
      "HeaderName": "Other Allwances",
      "ID": "2",
      "IsActive": "false",
      "SalaryFieldID": "0",
      "SalaryFieldName": "Conveyance",
      "SalaryPolicyDescription": "Band A Salary Policy",
      "SalaryPolicyID": "1",
      "SalaryPolicyName": "Band-A",
      "Type": "Earning"
    },
    {

      "HeaderID": "0",
      "HeaderName": "Earnings",
      "ID": "1",
      "IsActive": "false",
      "SalaryFieldID": "0",
      "SalaryFieldName": "HRA",
      "SalaryPolicyDescription": "Band A Salary Policy",
      "SalaryPolicyID": "1",
      "SalaryPolicyName": "Band-A",
      "Type": "Earning"
    }
  ],
    "_xmlns:i": "http://www.w3.org/2001/XMLSchema-instance",
    "_xmlns": "http://schemas.datacontract.org/2004/07/xxx.Common"
}}

我比较了我的代码在运行时提供的示例，一个有趣的发现是，在示例中，它加载了<tr>中的"k-master-row“类，但在我的示例中没有。

代码在没有任何异常的情况下运行，并加载策略。但它不显示层次结构网格。我把“调试器”放在dataInit中，但它从来没有到过那里，也没有停止过。

Answer 1

我使用MVVM让主-细节网格工作的唯一方法是为细节行提供一个模板(即使它只是一个‘空’的，你可以在detailInit事件中操作它)。

还要注意，在MVVM小部件初始化期间，上下文是窗口，因此当解析data-detail-init属性时，kendo将在错误的位置查找。您应该将其移动到binding/events属性，因为在设置绑定时，上下文是您绑定到的可观察对象。我已经修改了您的标记来演示这一点。

<script id="grid-detail-placeholder" type="text/x-kendo-template"></script>

<div class="box-body rm-padding">
  <div data-bind="invisible: IsRecordFound">No Policy Details found.</div>
  <div id="PayRollPolicyFieldGrid"
       data-role="grid"
       data-sortable="true"
       data-pageable="true"
       data-height="450"
       data-detail-template="grid-detail-placeholder"
       data-columns='[{"field": "SalaryPolicyID"}, {"field": "Name"}, {"field": "Description"}, {"field": "CreatedBy"}, {"field": "CreatedOn"}]'
       data-bind="source: PolicyList, events: { detailInit: detailInit, dataBound: dataBound }">
  </div>

</div>