kendo component encapsulation template/component use

Question

Is is possible to transclude custom column definitions via ng-content or TemplateRef or similar? I've been testing via Kendo UI Grid plunker available at site (http://www.telerik.com/kendo-angular-ui/components/grid/) as well as Angular2 child component as data but to no avail. I've also tried it ng-content select but also nothing. Any help is greatly appreciated, thanks!

@Component({
  selector: 'test-component',
  template: 
  `
    <kendo-grid [data]="Data">
    <kendo-grid-column></kendo-grid-column>
      // ??? // <ng-content kendo-grid-column></ng-content> // [object Object]
      // ??? // <kendo-grid-column ng-content></kendo-grid-column> // [object Object]
    </kendo-grid>
  `
})
export class TestComponent {
  @Input() Data: any;
}

@Component({
    selector: 'my-app',
    template: `
        <test-component [Data]="gridData">
          <kendo-grid-column field="ProductID" title="Product ID" width="120"></kendo-grid-column>
          <kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
          <kendo-grid-column field="UnitPrice" title="Unit Price" width="230"></kendo-grid-column>
          <kendo-grid-column field="Discontinued" width="120">
              <template kendoCellTemplate let-dataItem>
                  <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
              </template>
          </kendo-grid-column>
        </test-component>
    `
})
export class AppComponent { ... }

score 3 · Accepted Answer · answered Jan 05 '17 at 16:49

As answered by @rusev in a comment prior ... this will work for me, thanks !

The GridComponent is using ContentChildren to select defined columns, which does not work with transclusion. A possible workaround - plnkr.co/edit/w6EgmZL5z8J6CvpjMl2h?p=preview

This is the answer as can be seen in the plunkr

import { Component, Input, ContentChildren, ViewChild, ChangeDetectorRef } from '@angular/core';
import { ColumnComponent, GridComponent } from '@progress/kendo-angular-grid';

const resolvedPromise = Promise.resolve(null); //fancy setTimeout

@Component({
  selector: 'test-component',
  template: 
  `
    <kendo-grid [data]="Data">
    </kendo-grid>
  `
})
export class TestComponent {
  @Input() Data: any[];

  @ContentChildren(ColumnComponent) columns;
  @ViewChild(GridComponent) grid;

  constructor(private cdr: ChangeDetectorRef ) {}
  ngAfterContentInit() {
    resolvedPromise.then(() => { 
      this.grid.columns.reset(this.columns.toArray());
    });
  }
}

@Component({
    selector: 'my-app',
    template: `
        <test-component [Data]="gridData">
            <kendo-grid-column field="ProductID" title="Product ID" width="120"></kendo-grid-column>
        </test-component>
    `
})
export class AppComponent { ... }

The example on plunker doesn't seem to work anymore. In my local implementation I'm getting the following error: _v.context.$implicit.resolveStatus is null. And it seems the reset is not taking into account some more complex column implementations, eg. kendoGridCellTemplate. Any more detail on that would be greatly appreciated. — Piotr Lewandowski, Mar 21 '18 at 08:43
Works for me. ChangeDetectorRef is not necessary. With with following code you can even have pre-defined columns in the TestComponent that are then extended by the columns in the content: @ContentChildren(ColumnComponent) extraColumns: any; @ViewChild(GridComponent) grid: any; ngAfterContentInit() { resolvedPromise.then(() => { var existingColumns = this.grid.columns.toArray(); existingColumns.push(this.extraColumns.toArray()); this.grid.columns.reset(existingColumns); }); } — Jürgen Bayer, Oct 16 '22 at 09:11

score 0 · Answer 2 · answered Jan 04 '17 at 10:08

0

To select the kendo-grid-column elements with a ng-content, use:

<ng-content select="kendo-grid-column"></ng-content>

See this plunkr.

answered Jan 04 '17 at 10:08

Alex Gyoshev

11,929
4
44
74

I think I've tried this or something like it at one point. It doesn't seem to work. The result there is the default behavior of the grid when no `kendo-grid-column` components are found. If you take that out, the result is the same. If you duplicate or remove some columns, it does not seem to affect the result. I think it looks for the `kendo-grid-column` like a directive or as a component, thus why I've gotten `[object Object]`. – Kent Jan 04 '17 at 19:52
1

The GridComponent is using `ContentChildren` to select defined columns, which does not work with transclusion. A possible workaround - http://plnkr.co/edit/w6EgmZL5z8J6CvpjMl2h?p=preview – rusev Jan 05 '17 at 08:51

kendo component encapsulation template/component use

2 Answers2

Linked