Dynamic Multi-Column Headers

[Keith]

Hi

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

[Svet]

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

[Alejandro]

Hi Keith, can you solve it?
Regards

[Yan]

Any news? This feature was added to the roadmap?

[Crsitane]

hi! I'm encountering the same issue. Any news regarding this matter?
Regards

[Martin Bechev]

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

[Sandip]

Thank you Martin

Regards,
Sandip Patil