Question

我正在尝试渲染一个剑道网格细节模板。网格已正确呈现。但是，出于某种原因，我没有看到展开图标。我还看到在网格上方呈现的详细模板的内容（尽管没有绑定到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-template指令。我使用 \＃
此修复的JavaScript错误但 k-detail-template 仍未显示，因此我从模板中删除了class="ng-hide"
现在一切都很好，除了在网格之前出现的 k-detail-template 内容。将 grid-demo 移出标签集解决了这个问题。问题是，当在 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网格详细信息模板无法正确应用

1 个答案: