Issue with kendo-grid-column-group and Angular templates

[Chris]

I am trying to use Kendo Angular Grid with a configuration provided from elsewhere. I have a json object that spells out the columns. This worked great until I tried to add kendo-grid-column-group. Because I'm using a template I'm getting the console error "ColumnGroupComponent should contain ColumnComponent or CommandColumnComponent.".

How can I get past this error?

Here is a StackBlitz demonstrating it: https://stackblitz.com/edit/angular-phpipy-bb3wxe?file=src%2Fapp%2Fapp.component.ts

[John]

To resolve the issue with kendo-grid-column-group and Angular templates in Kendo Angular Grid, you can follow these steps based on the StackBlitz provided:

1. Correct Component Nesting:
• The error "ColumnGroupComponent should contain ColumnComponent or CommandColumnComponent" suggests that the structure of your columns is not correct within the kendo-grid-column-group.

 

2. Structure Adjustment:
• Ensure that within each kendo-grid-column-group, you directly nest kendo-grid-column components or other column-related components like kendo-grid-command-column.

 

3. Template Configuration:
• If you need to use templates for your columns (e.g., ng-template kendoGridCellTemplate), make sure these templates are defined within the kendo-grid-column components directly. Templates cannot be placed within the kendo-grid-column-group directly.

 

4. Modify StackBlitz Example:
• In your StackBlitz example, move the templates (kendoGridCellTemplate) from kendo-grid-column-group to individual kendo-grid-column components.

Example adjustment in app.component.html:

<kendo-grid [data]="gridData">
  <kendo-grid-column-group *ngFor="let columnGroup of columnGroups">
    <kendo-grid-column *ngFor="let column of columnGroup.columns"
                       [field]="column.field"
                       [title]="column.title">
      <ng-template kendoGridCellTemplate let-dataItem>
        {{ dataItem[column.field] }}
      </ng-template>
    </kendo-grid-column>
  </kendo-grid-column-group>
</kendo-grid>

 

5. Column Definitions:

• Ensure that field and title attributes are correctly defined for each kendo-grid-column

 

 

 

[Zornitsa]

Hi,

I can confirm that the information about the Kendo UI for Angular Grid and its columns configuration shared in the provided answer is indeed correct. 

The error in the linked StackBlitz example is observed because the ColumnGroupComponent does not have directly nested ColumnComponents, which it can recognize and thus group the corresponding Grid columns as expected. For example, in this case, the implementation can be modified in the following way to stay identical to the initially configured template structure:

•  https://stackblitz.com/edit/angular-phpipy-cgsm16 

In the above example, I moved the definition of the columns that should be grouped directly inside the <kendo-grid-column-group> tag and left the rest of the columns with their previous placement (in the columnDetailsTemplate).

Alternatively, the suggested adjustment in the other answer is also valid and can be used if preferred.

For further information regarding the usage of the ColumnGroupComponent and a runnable example for demonstration, please refer to the following article from our documentation:

• https://www.telerik.com/kendo-angular-ui/components/grid/columns/headers/ 

I hope the provided information is helpful.

Regards,
Zornitsa
Progress Telerik