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

Dynamic Multi-Column Headers

5 Answers 915 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

5 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
0
Yan
Top achievements
Rank 1
Iron
answered on 11 Aug 2023, 03:25 PM | edited on 11 Aug 2023, 03:28 PM
Any news? This feature was added to the roadmap?
0
Crsitane
Top achievements
Rank 1
Iron
answered on 11 Aug 2023, 03:46 PM
hi! I'm encountering the same issue. Any news regarding this matter?
Regards
0
Martin
Telerik team
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
Top achievements
Rank 1
commented on 26 Mar 2024, 07:52 AM | edited

Thank you Martin

Regards,
Sandip Patil
Tags
General Discussions
Asked by
Keith
Top achievements
Rank 1
Answers by
Svet
Telerik team
Alejandro
Top achievements
Rank 1
Yan
Top achievements
Rank 1
Iron
Crsitane
Top achievements
Rank 1
Iron
Martin
Telerik team
Share this question
or