Having two group columns with the same content breaks the layout

[mbechev]

Describe the bug
Having two group columns with the same content breaks the layout of the Grid:

<kendo-grid-column-group title="Group 1" >
    <kendo-grid-column-group title="Group 2">
        <kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
        <kendo-grid-column field="UnitsInStock" title="Units In Stock"></kendo-grid-column>
    </kendo-grid-column-group>
</kendo-grid-column-group>

To Reproduce
Steps to reproduce the behavior:

[amariq]

Workaround is basically this:

<kendo-grid-column-group title="Group 1" >
    <!-- >>> FIX -->
    <kendo-grid-column [width]="0" [hidden]="true"></kendo-grid-column>
    <!-- <<< FIX -->
    <kendo-grid-column-group title="Group 2">
        <kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
        <kendo-grid-column field="UnitsInStock" title="Units In Stock"></kendo-grid-column>
    </kendo-grid-column-group>
</kendo-grid-column-group>

Because of this code in ColumnGroupComponent:

public get colspan(): number {
    if (!this.children || this.children.length === 1) {
        return 1;
    }

   ...
}

[mbechev]

Fixed with the latest versions:
@progress/kendo-angular-grid - v16.11.0
@progress/kendo-theme-default - v8.2.1

https://stackblitz.com/edit/angular-eac2pp?file=src%2Fapp%2Fapp.component.ts,src%2Findex.html