Kendo 网格详细信息模板应用不正确

Question

我正在尝试呈现 kendo 网格详细信息模板。网格已正确呈现。但是，出于某种原因，我没有看到展开图标。我还看到在网格上方呈现的详细信息模板的内容（虽然没有绑定到它的 dataItem）。

<body ng-app="app">
    <div ng-controller="MainController">
      <tabset>
        <tab heading="A">
          <grid-demo grid-options="gridOptions"></grid-demo>
        </tab>
        <tab heading="B"></tab>
      </tabset>
    </div>
  </body>

JavaScript:

var app = angular.module('app', ['kendo.directives', 'ui.bootstrap']);

app.controller('MainController', ['$scope',
  function($scope) {
    $scope.data = new kendo.data.ObservableArray([{
      status: 1,
      requestor: 'Alex',
      approver: 'Jim',
      whenRequested: '01-22-2015'
    }, {
      status: 2,
      requestor: 'Peter',
      approver: 'Tanisha',
      whenRequested: '01-22-2015'
    }, {
      status: 3,
      requestor: 'Peter',
      approver: 'Tanisha',
      whenRequested: '01-22-2015'
    }]);

    $scope.gridOptions = {
      dataSource: $scope.data,
      sortable: true,
      scrollable: false,
      columns: [{
        field: "status",
        title: "status",
        template: "{{dataItem.status}}"
      }, {
        field: "requestor",
        title: "requestor",
        template: "{{dataItem.requestor}}"
      }, {
        field: "approver",
        title: "approver",
        template: "{{dataItem.approver}}"
      }, {
        field: "whenRequested",
        title: "whenRequested",
        template: "{{dataItem.whenRequested}}"
      }]
    };
  }
]);

app.directive('gridDemo', function() {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      gridOptions: '='
    },
    templateUrl: 'gridDemo.htm',
    link: function(scope, element, attributes) {
    }
  };
});

gridDemo.htm 模板

<div kendo-grid="demoGrid" k-options="gridOptions">
  <div k-detail-template>
    <a href="">Status{{dataItem.status}}</a>
  </div>
</div>

这是Plunkr

非常感谢任何帮助。

Answer 1

我是这样得出解决方案的：

我已经将 Kendo UI 更新到最新版本 - 2014.3.1411.
更新后出现 JavaScript 错误：Error: [$compile:multidir] Multiple directives [gridDemo, kendoGrid] asking for template on: <kendo-grid k-options="gridOptions" grid-options="gridOptions"> 所以我把 replace: false 放在 grid-demo 指令的定义中
然后我得到 JavaScript 错误：Error: Invalid template: ... 我发现问题出在 # 登录 k-detail -模板指令。我使用 \#
这修复了 JavaScript 错误，但是 k-detail-template 仍然不可见，所以我从模板

class="ng-hide"

现在一切正常，除了 k-detail-template 内容在网格之前可见。将 grid-demo 移出 tabset 解决了这个问题。问题是 Kendo 在 tabset

为了快速解决最后一个问题，我在 grid-demo:

中添加了两个类

  <kendo-grid class="demo-grid" k-options="gridOptions">
    <div class="detail-template" class="" k-detail-template>
      <a href="\#">Status{{dataItem.status}}</a>
    </div>
  </kendo-grid>

我用 CSS 选择器隐藏了 k-detail-template 定义：

.demo-grid > .detail-template {
  display: none;
}

参见 Plunker 中的解决方案。

Kendo 网格详细信息模板应用不正确

Kendo grid detail template does not apply correctly

angularjs

kendo-grid

angular-ui-bootstrap