Passing Kendo Angular grid column templates to a parent component hosting the grid
NickName:tomfumb Ask DateTime:2018-08-18T07:06:31

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.

Copyright Notice:Content Author:「tomfumb」,Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/51903816/passing-kendo-angular-grid-column-templates-to-a-parent-component-hosting-the-gr

Answers
SiliconSoul 2018-08-18T03:10:32

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. \nYou could use the approach that I suggested here - get the TemplateRef in the GridProvider component and render it with ngTemplateOutlet in the column templates:\n\nhttps://stackblitz.com/edit/angular-htffqq-ngmlgw?file=app/grid-provider.component.ts",


More about “Passing Kendo Angular grid column templates to a parent component hosting the grid” related questions

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 inst...

Show Detail

Generating templates programmatically in Kendo for Angular grid

Given this columns array in a parent component: columns = [ { field: 'field1', title: 'Title 1', width: '100px' }, { field: 'field2', title: 'Title 2', width: '200px'

Show Detail

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

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

Show Detail

Kendo Angular 2 grid with checkbox column

I'm trying to implement a column of checkboxs in my Kendo Angular 2 grid. I am following the example in the documentation (without checkboxes): http://www.telerik.com/kendo-angular-ui/components/g...

Show Detail

Template background not covered in Kendo for Angular grid

In this StackBlitz I have a Kendo for Angular grid with cell templates. The background color doesn't cover the entire cell, how to make it cover? Note that if I increase the span font size from 9px...

Show Detail

Kendo Grid Angular 6 Add class conditinoally in column

I have below link. https://stackblitz.com/edit/angular-pwq1rq-d4ymup?file=app/app.component.ts import { Component } from '@angular/core'; import { Component, ViewEncapsulation } from '@angular/c...

Show Detail

How to use Kendo-Grid with Angular 4 cli

I want to use the Kendo-Grid at Angular4, but I keep gettng this error: Uncaught Error: Template parse errors: 'Kunden-grid' is not a known element: 1. If 'Kunden-grid' is an Angular component, then

Show Detail

rowTemplate for Kendo Angular 2 grid

According to https://www.telerik.com/kendo-angular-ui/components/faq/ Kendo Grid for Angular 2 supports Row Templates Does the Grid for Angular support the same attributes, such as header attr...

Show Detail

Grid data is not refreshed in Kendo for Angular

In this plunk I have a Kendo for Angular grid that uses the kendoGridBinding directive to bind the data in memory. What I need to do is to manipulate the data model and reflect each insert/update/...

Show Detail

Kendo grid for angular cannot export index column to excel

I'm using angular 10 with kendo, now I have the problem with export excel from kendo grid, I html can preview normally, but when export as excel it have no id field. here is my code html &lt;kendo-...

Show Detail