Grid - Dynamically render a combination of column groups and columns

[Danny]

My organization has complex use cases for the kendo grid that we depend on, hence we created a wrapper component that dynamically generates the columns given a column configuration array, which can include columns with child columns.

I have a working solution but it requires duplicating the ng-template for the column for standalone columns and columns within column groups. This is less than ideal because if we make a change, we need to make it in two places in the template, so the maintenance and testing costs are higher.

I put together an example that I was hoping would work, but it seems like the @ViewChildren in the ColumnGroupComponent does not find child column definitions that are dynamically inserted using *ngTemplateOutlet unless the ng-template it references is declared at the same level in the template. I'm not sure if this is simply a limitation of Angular, or if there's something different that the ColumnGroupComponent can do to query for dynamic child columns.

As a quick example, this works:

<kendo-grid-column-group
    title="{{ column.title }}"
    *ngIf="column.children?.length; else singleColumn"
>
    <ng-container *ngFor="let childColumn of column.children">
        <ng-container *ngTemplateOutlet="columnTemplate, context: { $implicit: childColumn }"></ng-container>
        <ng-template #columnTemplate let-col>
            <kendo-grid-column
                    field="{{ col.field }}"
                    title="{{ col.title }}"
                    format="{{ col.format }}"
                    [filter]="col.type"
            ></kendo-grid-column>
        </ng-template>
    </ng-container>
</kendo-grid-column-group>

But this does not work:

<ng-template #columnTemplate let-col>
    <kendo-grid-column
            field="{{ col.field }}"
            title="{{ col.title }}"
            format="{{ col.format }}"
            [filter]="col.type"
    ></kendo-grid-column>
</ng-template>
<kendo-grid-column-group
        title="{{ column.title }}"
        *ngIf="column.children?.length; else singleColumn"
>
    <ng-container *ngFor="let childColumn of column.children">
        <ng-container *ngTemplateOutlet="columnTemplate, context: { $implicit: childColumn }"></ng-container>
    </ng-container>
</kendo-grid-column-group>

Here's the minimal reproduction example as a reference: https://stackblitz.com/edit/angular-fnyxio?file=src/app/app.component.ts

It would be nice if the grid could support this, which would greatly simplify the code that we have to maintain.

Thanks!

[Martin Bechev]

Hi Danny,

Thank you for the provided example.

Generating a mixture of GroupColumns and regular columns on multiple levels of nesting is possible, using *ngIf and *ngFor directives, but the columns need to be generated in the markup and the level of nesting should be known in advance.

The developer can provide a custom structure of Column and GroupColumn generated based on the collection of columns that will be iterated. This way the title option of the Grid GroupColumnComponent can be bound to a field on the column configuration object available in the *ngFor loop.

Please check the following example

https://stackblitz.com/edit/angular-eawjzr

I hope this helps. Let me know if I am missing something.

Regards,
Martin
Progress Telerik