Wrapping Kendo Grid in directive to keep common settings

[Eric]

I'm trying to wrap a Kendo grid in a directive that would allow other components to call my new directive and pass in a data-source and the template for the drop down. This way all components will use the same format and layout for the main grid, but different templates for the drop down.

I've successfully passed the data-source through to the kendo grid, however when I use ng-transclude to pass the template in for the drop down on the rows I get an error (Error: [ngTransclude:orphan]). I notice that the <ng-transclude></ng-transclude> in my directives html is getting passed through to the Kendo grid and is then orphaned now that it doesn't have an associated directive.

Here is some test code. I stripped out all of the dependent items.

<!-- accordionGrid.html -->
<div>
  <kendo-grid options="gridOptions">
    <ng-transclude></ng-transclude>
  </kendo-grid>
</div>

// accordionGrid-directive.js
function accordionGridDirective() {
return {
   controller: 'accordionGridController',
   replace: true,
   restrict: 'E',
   templateUrl: 'templates/accordionGrid.html',
   transclude: true,
   scope: {
     source: '=',
     columns: '='
    }
 };
}
angular.module('accordionGrid.accordionGridDirective', ['kendo.directives'])

   .directive('accordionGrid', [accordionGridDirective]);

//testController.html
<accordion-grid data-source="data" columns="columns">
    <div k-detail-template>
      <kendo-tabstrip>
        <ul>
          <li class="k-state-active">Orders</li>
          <li>Information</li>
        </ul>
        <div>
          <div kendo-grid k-options="detailGridOptions(dataItem)"></div>
        </div>
        <div>
          <ul>
            <li>Information:</li>
            <li>Other Kendo Tab</li>
          </ul>
        </div>
      </kendo-tabstrip>
    </div>
  </accordion-grid>

// test-controller.js
function testController($scope) {

    // Init scope variables.
$scope.data = new kendo.data.DataSource({
      data: [
        { text: 'Foo', id: 1 },
        { text: 'Bar', id: 2 },
        { text: 'Baz', id: 3 }
      ]
    });
      $scope.columns = [
          { field: 'text', title: 'Text' },
          { field: 'id', title: 'Id' }
      ];
    // Init scope functions.
      $scope.detailGridOptions = function(dataItem){
          return {
              dataSource:[
                 { text: dataItem.text, id: dataItem.id },
                 { text: 'blah', id: 4 },
                  { text: 'blah2', id: 5 }
              ],
              filterable: true,
              pageable: false,
              groupable: false,
              sortable: true,
              scrollable:{
                  virtual: true
              },
              selectable: 'row',
              columns:[
                  { field: 'text', title: 'Text' },
                  { field: 'id', title: 'Id' }
              ]
          };
      };
  }

  angular.module('testApp.testController', ['kendo.directives'])
      .controller('testController', ['$scope', testController]);

// test-directive.js
function testDirective() {

  return {
    controller: 'testController',
    replace: true,
    restrict: 'EA',
    // Path must be relative to index.html.
    templateUrl: 'templates/testController.html',
    scope: {

    }

  };
}

angular.module('testApp.testDirective', ['kendo.directives'])
    .directive('testDirective', [testDirective]);

[Eric]

I created some sample code if that helps clarify the question. 

http://dojo.telerik.com/@[e-mail]/UqULe

 

[Alexander Valchev]

Hi Eric,

First of all let me apologize for the late reply. Due to the local national holidays we were short on staff and as a result some tickets/forum posts were delayed.

Your question is related to custom Angular JS directives and the usage of ng-transclude directive. According to AngularJS documentation the "Orphan ngTransclude Directive" will occur when you have forgotten to set transclude: true in some directive definition, and then used ngTransclude in the directive's template.

To resolve, either remove the offending ngTransclude or check that transclude: true is included in the intended directive definition.

Regards,
Alexander Valchev
Telerik

 

 

[Eric]

I had transclude set to true. Somehow the grid was copying the offending ng-transclude before the header. I was able to resolve this by making a new directive that required the accordionGridDirective() and passed the scopes transclude method and called it manually. This seemed to get called prior to the grid rendering.