Angular 2 Kendo UI pass column definitions to grid from parent component

Question

I am currently working on a project using Angular 4 and Kendo UI for Angular. We have multiple kendo grids that should use the same configuration.(toolbar, paging, footer template, ...)

I decided to make a component with the default configuration for our grids, so we don't have the same code all over the place.

The main difference between all the grids are the column definitions. So my idea was to pass them as content to my wrapper component and add the ng-content in my kendo grid.

So what I have right now:

@Component({
    template: "<grid-wrapper>
                   <kendo-grid-column field="projectName">
                       <ng-template kendoGridHeaderTemplate>
                           <span>Project Name</span>
                       </ng-template>
                   </kendo-grid-column>
               </grid-wrapper>"
})
export class MainComponent {
}

@Component({
    template: "<div>
                   <!-- Some code for buttons shown above the grid -->
                   <kendo-grid [data]="data"
                               [pageSize]="pageSize"
                               [sortable]="{mode: 'single'}"
                       <ng-content></ng-content>
                       <!-- templates and components for paging, toolbar, ... -->
                   </kendo-grid>
               </div>",
    selector: "grid-wrapper"
})
export class WrapperComponent {
    private data: GridDataResult;
    private pageSize: number = 10;

    // ...
    // Some code for filling the data
    // ...
}

When debugging the kendo grid, I noticed that the GridComponent gets the columns with @ContentChildren, but this collection is empty.

Does anybody have an idea what is going wrong? Or any suggestions on how this can be done better?

Best regards, BillieTK.

Answer 1

got the answer at :

kendo component encapsulation template/component use

look at the plunker shown there. worked for me!! The GridComponent is using ContentChildren to select defined columns, which does not work with transclusion. A possible workaround - plnkr.co/edit/w6EgmZL5z8J6CvpjMl2h?p=preview – rusev Jan 5 at 8:51