I am currently using kendo-treelist-column-group inside a TreeList, I have to use it because I need to have more headers above a tree List component. Thing is that I need to have it dynamic and not static, I have this object:

  public groups = [
    {
      title: 'group 1',
      width: 100,
    },
    {
      title: 'group 1',
      width: 100,
    }
  ];

  public groups2 = [
    {
      title: 'group 1',
      width: 100,
    },
    {
      title: 'group 1',
      width: 100,
    }
  ];

And I would like it to be like this image

But the issue I am having is that *ngFor just gives me an extra row and does it meet what I need

I have having a great challenge here because it seems that I need to call component itself as many time as the elements of the array and then inside put the column that matches data received from backend (in my example, size is the key I want to show)

Check this link: ponent.ts

I would like the component to be scalable and not restricted to a fixed number of columns Any help is much appreciated

I am currently using kendo-treelist-column-group inside a TreeList, I have to use it because I need to have more headers above a tree List component. Thing is that I need to have it dynamic and not static, I have this object:

  public groups = [
    {
      title: 'group 1',
      width: 100,
    },
    {
      title: 'group 1',
      width: 100,
    }
  ];

  public groups2 = [
    {
      title: 'group 1',
      width: 100,
    },
    {
      title: 'group 1',
      width: 100,
    }
  ];

And I would like it to be like this image

But the issue I am having is that *ngFor just gives me an extra row and does it meet what I need

I have having a great challenge here because it seems that I need to call component itself as many time as the elements of the array and then inside put the column that matches data received from backend (in my example, size is the key I want to show)

Check this link: https://stackblitz/edit/angular-wqcaqmfg-544nabjy?file=src%2Fapp%2Fappponent.ts

I would like the component to be scalable and not restricted to a fixed number of columns Any help is much appreciated

• angular
• kendo-ui
• telerik
• kendo-treelist

1 Answer 1

It would look something like this:

  @for(item of groups;let index = $index;track index;) {
    <kendo-treelist-column-group [title]="item.title"  [width]="200">
    @for(item of groups.slice(index, index+1); track $index) {
      <kendo-treelist-column-group [title]="item.title" [width]="200">
        <kendo-treelist-column field="type" title="Size" [width]="200">
        </kendo-treelist-column>
      </kendo-treelist-column-group>
    }
    </kendo-treelist-column-group>
  }

We loop once and then create the group for treelist, then create an inner loop and recreate it again.

Since you are using angular 18 I have provided the @for syntax

Full Code:

import { Component } from '@angular/core';
import { SortDescriptor } from '@progress/kendo-data-query';
import { filesystem, Entry } from './filesystem';
import { fileIcon, folderIcon, SVGIcon } from '@progress/kendo-svg-icons';

@Component({
  selector: 'my-app',
  template: `
    <kendo-treelist
      kendoTreeListExpandable
      [kendoTreeListHierarchyBinding]="data"
      childrenField="contents"
      [height]="400"
    >
      <kendo-treelist-column
        [expandable]="true"
        field="name"
        title="Name"
        [locked]="true"
        [width]="150"
      >
        <ng-template kendoTreeListCellTemplate let-dataItem>
          <kendo-svgicon
            [icon]="folderSVG"
            *ngIf="dataItem.type === 'directory'"
          ></kendo-svgicon>
          <kendo-svgicon
            [icon]="fileSVG"
            *ngIf="dataItem.type === 'file'"
          ></kendo-svgicon>
          {{ dataItem.name }}
        </ng-template>
      </kendo-treelist-column>
      @for(item of groups;let index = $index;track index;) {
        <kendo-treelist-column-group [title]="item.title"  [width]="200">
        @for(item of groups.slice(index, index+1); track $index) {
          <kendo-treelist-column-group [title]="item.title" [width]="200">
            <kendo-treelist-column field="type" title="Size" [width]="200">
            </kendo-treelist-column>
          </kendo-treelist-column-group>
        }
        </kendo-treelist-column-group>
      }
    </kendo-treelist>
  `,
})
export class AppComponent {
  public data: Entry[] = filesystem;
  public folderSVG: SVGIcon = folderIcon;
  public fileSVG: SVGIcon = fileIcon;

  public sort: SortDescriptor[] = [
    {
      field: 'type',
      dir: 'asc',
    },
    {
      field: 'name',
      dir: 'asc',
    },
  ];

  public groups = [
    {
      title: 'group 1',
      width: 100,
    },
    {
      title: 'group 2',
      width: 100,
    },
  ];

  public headerGroups = [
    {
      title: '15 oct',
      width: 100,
      children: [],
    },
    {
      title: 'Prior Period',
      width: 100,
      children: [
        {
          title: '20 oct',
          width: 100,
        },
      ],
    },
  ];

  public headerGroups1 = {
    title: 'root',
    width: 100,
    children: [
      {
        title: 'Prior Period',
        width: 100,
        children: [
          {
            title: '20 oct',
            width: 100,
          },
          {
            title: '30 oct',
            width: 100,
          },
        ],
      },
    ],
  };
}

Stackblitz Demo