I have a kendo grid which loads the data dynamically. Grid is grouped by one parameter also has pagination implemented. There is a group data added to every column using

"kendoGridGroupHeaderColumnTemplate"

Issue I am facing for the expand and collapse functionality when I collapse all the rows it also hides the details which are in

kendoGridGroupHeaderColumnTemplate

I have tried below code in HTML and TS files

 <kendo-grid
            [kendoGridBinding]="data"
            [height]="480"
            [group]="groups"
            [isGroupExpanded]="isGroupExpanded"
            (groupCollapse)="toggleGroup($event)"
            (groupExpand)="toggleGroup($event)" >
            <ng-template kendoGridToolbarTemplate>
                <button kendoButton (click)="expandAll()">Expand All Groups</button>
                <button kendoButton (click)="collapseAll()">Collapse All Groups</button>
            </ng-template>
             <kendo-grid-column  *ngFor="let item of cols; let i = index" field="{{ item.columnField }}" title="{{ item.columnTitle }}"  [width]="item.width">
            <ng-template kendoGridCellTemplate let-dataItem>
                <div class="cell-container">

                <span *ngIf="item.columnField === 'ProductID'">
                {{dataItem[item.columnField]}}

                </span>
                <span *ngIf="item.columnField === 'ProductName'">
                {{dataItem[item.columnField]}}
                <ng-template kendoGridGroupHeaderColumnTemplate let-group="group" let-aggregates="aggregates">Group level 1 </ng-template>
                </span>
                <span *ngIf="item.columnField === 'UnitPrice'">
                {{dataItem[item.columnField]}}
                <ng-template kendoGridGroupHeaderColumnTemplate let-group="group" let-aggregates="aggregates">
                Group level 2 </ng-template>
                </span>
                <span *ngIf="item.columnField === 'Category.CategoryName'">
                <ng-template kendoGridGroupHeaderTemplate let-value="value">
                    {{ value }}
                </ng-template>
                </span>
                </div>
            </ng-template>
            </kendo-grid-column>
        </kendo-grid>

TS:

export class AppComponent {
  cols = [
    {
      columnField: 'ProductID',
      columnTitle: 'Id',
      width: 80,
    },
    {
      columnField: 'ProductName',
      columnTitle: 'Name',
      width: 300,
    },
    {
      columnField: 'UnitPrice',
      columnTitle: 'Unit Price',
      width: 120,
    },
    {
      columnField: 'Category.CategoryName',
      columnTitle: '',
      width: 0,
    },
  ];
  public groups: GroupDescriptor[] = [{ field: 'Category.CategoryName' }];

  public data: Product[] = products;

  public expandedKeys: { field: string; value: string }[] = [
    { field: 'Category.CategoryName', value: 'Beverages' },
  ];

  public isGroupExpanded = (rowArgs: GroupRowArgs): boolean => {
    const matchKey = this.expandedKeys.some(
      (groupKey) =>
        groupKey.field === rowArgs.group.field &&
        groupKey.value === rowArgs.group.value
    );

    return (
      (this.initiallyExpanded && !matchKey) ||
      (!this.initiallyExpanded && matchKey)
    );
  };

  private initiallyExpanded = false;

  public expandAll(): void {
    this.initiallyExpanded = true;
    this.expandedKeys = [];
  }

  public collapseAll(): void {
    this.initiallyExpanded = false;
    this.expandedKeys = [];
  }

  public toggleGroup(rowArgs: GroupRowArgs): void {
    
    const keyIndex = this.expandedKeys.findIndex(
      (groupKey) =>
        groupKey.field === rowArgs.group.field &&
        groupKey.value === rowArgs.group.value
    );

    if (keyIndex === -1) {
      this.expandedKeys.push({
        field: rowArgs.group.field,
        value: rowArgs.group.value,
      });
    } 
    else {
      this.expandedKeys.splice(keyIndex, 1);
    }
  }

}

Here is the image attached:
As shown in the image, red marked data is group level data, which is visible when one of the group is expanded. enter image description here

Below is the image when I click on collapse all button
As shown in image after collapse, the data added for the group is not visible. This is the issue
enter image description here