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

Dynamic Multi-Column Headers

2 Answers 238 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Keith
Top achievements
Rank 1
Keith asked on 18 May 2018, 07:27 AM

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

2 Answers, 1 is accepted

Sort by
0
Svet
Telerik team
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.
0
Alejandro
Top achievements
Rank 1
answered on 29 Mar 2021, 06:00 PM
Hi Keith, can you solve it?
Regards
Tags
General Discussions
Asked by
Keith
Top achievements
Rank 1
Answers by
Svet
Telerik team
Alejandro
Top achievements
Rank 1
Share this question
or