Kendo 标头模板

Question

我正在尝试使用 headerTemplate 及其下的列标题和数据字段构建此 dojo，但我不确定我做错了什么我没有收到任何错误，所以很难理解发生了什么？

https://dojo.telerik.com/@mcdevittnccn/iNinebUm

Answer 1

我会在这里建议一些不同的方法。问题是您的数据是一个复杂的嵌套对象（一个包含对象数组的对象 - 基本上是网格内的网格）。 Kendo 数据源最适合扁平化数据。如果您不能更改数据，您可以使用 kendo 网格 detailInit 事件，这样每个对象数组都有一个包含数据的内部 table。像这样：

  $(document).ready(function () {
    $("#kendogrid").kendoGrid({
      dataSource: {
        data: data,
        pageSize: 10
      },
      pageable: true,
      scrollable: false,
      persistSelection: true,
      toolbar: ["search"],
      search: {
        fields: ['Name']
      },
      sortable: true,
      columns: [
        {
          field: "Name",
          title: "Name"
        }
      ],
      detailTemplate: '<div class="grid"></div>',
      detailInit: function (e) {
        e.detailRow.find(".grid").kendoGrid({
          dataSource: e.data.PanelsMeetingViewModel
        });
      }
    });
  });

示例：Kendo grid detail init

注意：由于内部 table 快速搜索将不起作用。

Kendo 标头模板

Kendo headerTemplate

kendo-ui

kendo-grid