This is a migrated thread and some comments may be shown as answers.

Dynamic Multi-Column Headers

5 Answers 1223 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Keith asked on 18 May 2018, 07:27 AM

I'm trying to create a grid which has a mixture of multi-column headers and normal headers. I don't know the number / type of columns at design time so I'm using an array and trying to loop round the columns using a recursive template shown below.

<kendo-grid #grid [data]="result.rows"

[navigable]="true">

<ng-container *ngTemplateOutlet="recursiveColumns; context:{ columns: result.columns }">

</ng-container>

</kendo-grid>

<ng-template #recursiveColumns let-cols="columns">

<ng-container *ngFor="let c of cols">

<kendo-grid-column

*ngIf="!c.isGroup"

field="{{c.field}}"

title="{{c.title}}"

[locked]="c.isLocked || false">

</kendo-grid-column>

<kendo-grid-column-group

*ngIf="c.isGroup"

title="{{c.title}}">

<ng-container *ngTemplateOutlet="recursiveColumns; context:{ columns: c.columns }"></ng-container>

</kendo-grid-column-group>

</ng-container>

</ng-template>

Unfortunately the columns / groups do not get rendered. As far as I can tell my template is correct - everything is displayed correctly if I change the page to write out nested divs instead.

Please can you let me know if what I'm trying to achieve is possible? and if so,what changes I need to make to get it to work.

Thanks

Keith

5 Answers, 1 is accepted

answered on 22 May 2018, 07:12 AM

Hi Keith,

Unfortunately, the desired functionality is not supported.

The limitation is caused due to the grid relying on Angular's @ContentChildren to get its child elements, respectively its columns. This is why, the described approach will not work out and we need to define all columns within the grid's markup.

Let me know in case I can provide further assistance for this case.

Regards,
Svetlin
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 15 Aug 2023, 07:22 AM

Hi Yan, Crsitane,

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.

 public groupedColumns = [
    {
      title: 'Date 1',
      width: '600',
      isGroup: true,
      columns: [
        { field: 'ProductName', width: '150', isGroup: false },
        { field: 'UnitPrice', width: '80' },
        { field: 'UnitsInStock', width: '80' }
      ]
    },

    {
      title: 'Date 2',
      width: '600',
      isGroup: true,
      columns: [
        { field: 'ProductName', width: '150', isGroup: false },
        { field: 'UnitPrice', width: '80' },
        { field: 'UnitsInStock', width: '80' }
      ]
    }
  ];

Here is an example:

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

Regards,
Martin
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Sandip

commented on 26 Mar 2024, 07:52 AM | edited

Thank you Martin

Regards,
Sandip Patil