If you edit the cell using inline editing, it works correctly. However, inline editing does not function properly when column grouping is enabled.
<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>
</kendo-grid>
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;
}
public 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);
}
});
});
}
}
}
It should replace the original value from this.advanceGridData with the edited value while grouping the column.
When We do grouping the inline edited cell doesnt save the values in kendo cell
New contributor
sahil hamand is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.