[Solved] How to make custom groupable grid group row label?

[Miljana]

This is template code: 

 <kendo-grid
      [data]="gridView"
      [groupable]="true"
      [hideHeader]="true"
    > ... </kendo-grid>

This is code from component: 

export class MyComponent {
  data: any[] = [
    {
      id: crypto.randomUUID(),
      name: 'Emma Thompson',
      group: 'Team A',
    },
    {
      id: crypto.randomUUID(),
      name: 'Oliver Smith',
      group: 'Team B',
    },
    {
      id: crypto.randomUUID(),
      name: 'Anna Brown',
      group: 'Team A',
    },
  ];
  group: GroupDescriptor[] = [{ field: 'group', dir: 'asc' }];

  get gridView() {
    return process(this.data, {
      group: this.group,
    });
  }
}

This is output: 

Question is, how can I customize this label so that it displays text that I want? I have tried setting it programatically, but as soon as I collapse/expand top group, seems like all other groups reset label back to this default one?

[Hetali]

Hello Miljana,

Thank you for reaching out.

We have a dedicated article to customize the Kendo UI Grid Group Header. Using the GroupHeaderTemplateDirective, you can customize the label to display the text you want to show. For example:

<kendo-grid-column field="group" title="Group" [width]="120">
  <ng-template kendoGridGroupHeaderTemplate let-group="group">
    <div style="color: #942e00;">
      <strong>Custom Group label: {{ group.value }}</strong>
    </div>
  </ng-template>
</kendo-grid-column>

Output:

In this StackBlitz example, I have customized the group header in the Grid using GroupHeaderTemplateDirective.

I hope this helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

[Miljana]

Hi, Hetali,

Thank you very much for your response. The thing is that I didn't have group column displayed in my table so directive was not working when put in other places inside grid.

[Hetali]

Miljana,

In that case, you can set the hidden property of the Group column in the Grid to true. That way, you can show the custom group header but still have the column hidden. For example:

<kendo-grid-column field="group" title="Group" [width]="120" [hidden]="true">
  <ng-template kendoGridGroupHeaderTemplate let-group="group">
    <div style="color: #942e00;">
      <strong>Custom Group label: {{ group.value }}</strong>
    </div>
  </ng-template>
</kendo-grid-column>

Please take a look at this updated StackBlitz example where I have hidden the Group column.

Output:

Let me know if this helps.

Regards,
Hetali
Progress Telerik