1

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.

tomfumb
  • 3,669
  • 3
  • 34
  • 50

2 Answers2

2

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

SiliconSoul
  • 799
  • 4
  • 6
  • thanks for your input, I read your answer before posting and originally didn't think it was viable in my case. However your code edit on stackblitz makes it a bit clearer. I'll give this a try on Monday – tomfumb Aug 18 '18 at 13:18
  • thanks again, I extended your example so that the grid-provider component can find the appropriate template for each field. Each grid-user-provided template pairing is wrapped in a grid-column component so that it can be properly identified by grid-provider, which also identifies columns for which no template was provided: https://stackblitz.com/edit/angular-htffqq-p8wies – tomfumb Aug 20 '18 at 18:26
0

Following @SiliconSoul's example the preferred solution is here: https://stackblitz.com/edit/angular-htffqq-p8wies

tomfumb
  • 3,669
  • 3
  • 34
  • 50