Kendo grid Inline Editing not working with the grouping

Describe the bug If I edit the cell with inline editing, it works, but inline editing does not work with column grouping. To Reproduce Steps to reproduce the behavior: Group the column header and then try to edit the cell The cell value is not working as expected. HTML :-

<kendo-grid kendoGridExpandGroupBy id="my-grid" [groupsInitiallyExpanded]="initiallyExpanded" [(expandedGroupKeys)]="expandedGroupKeys" [columnMenu]="{ filter: true }" [kendoGridBinding]="advanceGridData" [hidden]="!isAdvanceGrid" [ngClass]="{'report-display-none': !(groups.length > 0 || aggregates.length >0) }" [filter]="state.filter" [navigable]="true" [groupable]="true" [height]="'auto'" [resizable]="true" [skip]="state.skip" class="grid-page-number" [filterable]="isFilter" [sortable]="{mode:'multiple'}" [sort]="sort" [group]="groups" (cellClick)="cellClickHandler($event)" (cellClose)="cellCloseHandler($event)" (filterChange)="applyFilter($event)" (sortChange)="sortChange($event)" (columnVisibilityChange)="checkHiddenColumns($event)" (groupChange)="groupChange($event)" (dataStateChange)="dataStateChange($event)" (keydown)="keyPress($event)" (excelExport)="onExcelExport($event)" [kendoGridSelectBy]="selectedKey" [selectedKeys]="excludedRow" [selectable]="{enabled: true, checkboxOnly: true }" >

                         <kendo-grid-column *ngFor="let header of headers"
                                   [field]="'[\'' + header.field + '\']'"
                                   [title]="header.title"
                                   [filter]="header.filter"
                                   [format]="header.format"
                                   [headerStyle]="{'font-weight': 'bold'}"
                                   [filterable]="header.isFilterable"
                                   [width]="header.width"
                                   [hidden]="header.hidden"
                                   [locked]="header.locked"
                                   [style]="{'background-color': header['backgroundColor'], 'color':header['textColor'], 'text-align': header['alignment'], 'border-bottom':header['backgroundColor']? '1px solid #A9A9A9': ''}">
                                    </kendo-grid-column>

TS:-

public cellClickHandler(args: any) { const { sender, rowIndex, columnIndex, dataItem, isEdited, column } = args; this.isEditingCell = true; this.currentlyEditingDataItem = dataItem; sender.editCell(rowIndex, columnIndex, this.createFormGroup(dataItem, column)); this.editedRowIndex = rowIndex; }

public createFormGroup(dataItem: any, column): FormGroup {
    const formGroup = this.formBuilder.group({});
    const propertyName: string = column.field;
    const normalizedKey = Array.isArray(propertyName) ? propertyName[0] : propertyName;
    formGroup.addControl(normalizedKey, this.formBuilder.control(dataItem[normalizedKey]));
    formGroup.valueChanges.subscribe(formValues => {
        Object.keys(formValues).forEach(key => {
            const normalizedFormKey = Array.isArray(key) ? key[0] : key;
            dataItem[normalizedFormKey] = formValues[key];
        });
    });

    return formGroup;
}
cellCloseHandler(args) {
    const { formGroup, dataItem, column } = args;
    if (!formGroup.valid) {
        args.preventDefault();
    } else if (formGroup.dirty) {
        this.editService.assignValues(dataItem, formGroup.value);
        this.editService.update(dataItem);

        if (this.editedRowIndex !== -1) {
            const fieldName = column.field.replace(/[\[\]']+/g, '');

            Object.keys(formGroup.value).forEach(key => {
                this.headers.forEach(item => {
                    if (fieldName === item.title) {
                        const updatedValueAsString = formGroup.value[key];
                        if (item.dataType === 'Float') {
                             this.updatedValue = parseFloat(updatedValueAsString);
                        } else if (item.dataType === 'Integer') {
                            this.updatedValue = parseFloat(updatedValueAsString);
                        } else {
                            this.updatedValue = updatedValueAsString;

                        }
                        this.advanceGridData[this.editedRowIndex][fieldName] = this.updatedValue;
                        this.total = aggregateBy(this.advanceGridData, this.aggregates);
                    }
                });
            });
        }
    }
}

Expected behavior It should replace the ordiginal value with edited value while grouping the column Screenshots If applicable, add screenshots to help explain your problem.

Browser

OS: All
Browser All
Version All

Additional context Add any other context about the problem here.

telerik / kendo-angular

Kendo grid Inline Editing not working with the grouping #4311