This is a migrated thread and some comments may be shown as answers.

Wrapping Kendo Grid in directive to keep common settings

3 Answers 89 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Eric
Top achievements
Rank 1
Eric asked on 29 Apr 2015, 04:12 PM

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]);

3 Answers, 1 is accepted

Sort by
0
Eric
Top achievements
Rank 1
answered on 29 Apr 2015, 06:51 PM

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

http://dojo.telerik.com/@eric.eastman@gmail.com/UqULe

 

0
Alexander Valchev
Telerik team
answered on 04 May 2015, 10:04 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Eric
Top achievements
Rank 1
answered on 05 May 2015, 05:04 PM
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.
Tags
Grid
Asked by
Eric
Top achievements
Rank 1
Answers by
Eric
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or