Nested kendo-grid-column-group incorrect layout

[Erik]

Hello, having an issue after upgrading to Angular 15 (from Angular 6), after update the Grid to angular-kendo-grid 7.4.2, now my Grid layout is wrong on columns with nested kendo-grid-column-group, this is the code for that column:

      <kendo-grid-column-group title="Body" [headerStyle]="{'background-color': '#0064A3','color': '#fff','line-height': '1em'}">
        <kendo-grid-column-group title="Material" [headerStyle]="{'background-color': '#0899b2','color': '#fff','line-height': '1em'}">
          

          <kendo-grid-column class="text-center" field="bodMatShortDescription" title="ASME" width="300" [headerStyle]="{'background-color': '#0da6c1','color': '#fff','line-height': '1em'}">
            <ng-template kendoGridEditTemplate
                         let-dataItem="dataItem"
                         let-column="column"
                         let-formGroup="formGroup">

              <!--No editable field-->
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column class="text-center" field="bodMatVMS" title="VMS" width="160" [headerStyle]="{'background-color': '#0da6c1','color': '#fff','line-height': '1em'}">
            <ng-template kendoGridCellTemplate let-dataItem>
              {{getEchart1051ById(dataItem.bodMatVMS_ID)}}
            </ng-template>

            <ng-template kendoGridEditTemplate
                         let-dataItem="dataItem"
                         let-column="column"
                         let-formGroup="formGroup">

              <kendo-dropdownlist [data]="echart1051Data_Active"
                                  [textField]="'vms'"
                                  [valueField]="'id'"
                                  [valuePrimitive]="true"
                                  [formControl]="formGroup.get('bodMatVMS_ID')">

              </kendo-dropdownlist>

             

            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column class="text-center" field="bodMatMCS" title="MCS" width="160" [headerStyle]="{'background-color': '#0da6c1','color': '#fff','line-height': '1em'}">
            <ng-template kendoGridCellTemplate let-dataItem>
              {{getEchart1056ById(dataItem.bodMatMCS_ID)}}
            </ng-template>

            <ng-template kendoGridEditTemplate
                         let-dataItem="dataItem"
                         let-column="column"
                         let-formGroup="formGroup">

              <kendo-dropdownlist [data]="echart1056Data_Active"
                                  [textField]="'mcs'"
                                  [valueField]="'id'"
                                  [valuePrimitive]="true"
                                  [formControl]="formGroup.get('bodMatMCS_ID')">

              </kendo-dropdownlist>

             

            </ng-template>
          </kendo-grid-column>
        </kendo-grid-column-group>

      </kendo-grid-column-group>

 

I attached image below, column-group Body should be same length as column Material but is incorrect after the upgrade, any ideas why is happening? Thanks.