Passing column templates to a parent component with a kendo-grid

[Tom]

My aim is to have one component "grid-user" pass column templates (kendoGridCellTemplate, kendoGridHeaderTemplate etc.) to a parent "grid-provider" component that hosts the <kendo-grid> 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. 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. Help?

[Tom]

My original approach was unworkable, but with input from a Stack Overflow post (https://stackoverflow.com/q/51903816/519575) I was able to get the following example working: https://stackblitz.com/edit/angular-htffqq-p8wies

This approach allows multiple users of a shared grid to provide their own column templates (and column configurations, if a few small modifications are made).

[Svet]

Hi Tom,

Indeed, this is a valid approach of configuring the grid. Angular's *ngFor directive allows to create the columns dynamically based on a predefined columns settings array. We could further use Angular's *ngIf directive to load a specific template for a specific column as demonstrated in the following example:
https://stackblitz.com/edit/angular-d7zys3-ni2jws?file=app/app.component.ts

Regards,
Svetlin
Progress Telerik

[Tom]

Thanks Svetlin, the approach you identified achieves a similar goal but it's far less flexible and extensible - the grid requires prior knowledge of every column it might encounter. My goal was to avoid this and retain full responsibility for defining columns within the grid-user component, which my updated example enables.