angularkendo-uikendo-gridangular-templatekendo-angular-ui

Passing Kendo Angular grid column templates to a parent component hosting the grid


I've asked this question on the Telerik Kendo Angular UI forum, and will update both locations should I get an answer, but this problem could potentially be due to my limited Angular knowledge instead of Kendo functionality.

My aim is to have one component "grid-user" pass column templates (kendoGridCellTemplate, kendoGridHeaderTemplate etc.) to a parent "grid-provider" component that hosts the element, so that multiple grid-users can present the same grid without each having to configure paging, sorting, etc.

My application provides the ability to search different kinds of products. All search results are shown in Kendo UI for Angular grid. Each kind of product has different fields that are shown in the search results but the grid's general functionality is always the same. I want to define the grid once but let the different search providers provide their own column configurations and data. However so far I have only been able to provide header, filter, and cell templates when the <ng-template kendoGridCellTemplate> etc. are nested directly under <kendo-grid-column> elements, which are nested directly under the <kendo-grid> element - all in the same template.

Please see this example: https://stackblitz.com/edit/angular-htffqq

The first grid is configured correctly but cell templates are directly beneath <kendo-grid-column> and <kendo-grid>. The second grid, which shows a default configuration, doesn't recognise the template provided by @ContentChild and defaults to no configuration.

Is it possible for columns to be configured in this way? I've tried many slightly different approaches but none seem to make any difference, so I'm starting to think it's simply not possible.


Solution

  • I don't think that the grid can select templates provided in this way. At least I couldn't select anything with ContentChild or ContentChildren from projected content. You could use the approach that I suggested here - get the TemplateRef in the GridProvider component and render it with ngTemplateOutlet in the column templates:

    https://stackblitz.com/edit/angular-htffqq-ngmlgw?file=app/grid-provider.component.ts