item group not editable in custom edit form in data grid

I have a data-grid, which allowUpdating and allowEditing set true. Created a custom edit, since i want to edit some array items which are not displayed in columns. I set a toggle with customizeItem, and setCellValue methods. toggle works but after first use fields are displayed with css issues and not editable form.

enter image description here

here is my code

<dx-data-grid keyExpr="serviceID" [dataSource]="dataSourceInvoice" (onSaved)="update($event)">

<dxo-editing mode="form" [allowUpdating]="true" [allowDeleting]="true" [allowAdding]="true">
<dxo-form labelLocation="left" [colCount]="1" validationGroup="editForm">
<dxi-item itemType="group" caption="General" [colCount]="2">
<dxi-item dataField="serviceDate">
<dxi-validation-rule type="required"></dxi-validation-rule>
</dxi-item>
<dxi-item dataField="serviceTypeID">
<dxo-lookup [dataSource]="dataSourceServiceType" displayExpr="serviceTypeName"
valueExpr="serviceTypeID">
</dxo-lookup>
<dxi-validation-rule type="required"></dxi-validation-rule>
</dxi-item>
<dxi-item dataField="serviceName" cssClass="mt12">
<dxi-validation-rule type="required"></dxi-validation-rule>
</dxi-item>
<dxi-item dataField="pax" [editorOptions]="{ disabled: true }"></dxi-item>
<dxi-item dataField="activityPricePerPerson">
<dxo-label text="Price Per Person"></dxo-label>
</dxi-item>
<dxi-item dataField="servicePrice" [editorOptions]="{ disabled: true }"></dxi-item>
</dxi-item>

<dxi-item itemType="group" caption="Room Prices" [colCount]="3" [visible]="showRoom">
<dxi-item>
<dxo-label text="Single Price Per Person"></dxo-label>
<dx-number-box [(value)]="singleRoomPrice" [min]="0"></dx-number-box>
</dxi-item>
<dxi-item>
<dxo-label text="Num. Single Rooms"></dxo-label>
<dx-number-box [(value)]="singleRoomCount" [min]="0"></dx-number-box>
</dxi-item>
<dxi-item>
<dxo-label text="Single Room Total"></dxo-label>
<dx-number-box [value]="calculateTotal(singleRoomPrice, singleRoomCount)" [min]="0"></dx-number-box>
</dxi-item>

<dxi-item>
<dxo-label text="Double Price Per Person"></dxo-label>
<dx-number-box [(value)]="doubleRoomPrice" [min]="0"></dx-number-box>
</dxi-item>
<dxi-item>
<dxo-label text="Num. Double Rooms"></dxo-label>
<dx-number-box [(value)]="doubleRoomCount" [min]="0"></dx-number-box>
</dxi-item>
<dxi-item>
<dxo-label text="Double Room Total"></dxo-label>
<dx-number-box [value]="calculateTotal(doubleRoomPrice, doubleRoomCount)" [min]="0"></dx-number-box>
</dxi-item>

<dxi-item>
<dxo-label text="Twin Price Per Person"></dxo-label>
<dx-number-box [(value)]="twinRoomPrice" [min]="0"></dx-number-box>
</dxi-item>
<dxi-item>
<dxo-label text="Num. Twin Rooms"></dxo-label>
<dx-number-box [(value)]="twinRoomCount" [min]="0"></dx-number-box>
</dxi-item>
<dxi-item>
<dxo-label text="Twin Room Total"></dxo-label>
<dx-number-box [value]="calculateTotal(twinRoomPrice, twinRoomCount)" [min]="0"></dx-number-box>
</dxi-item>

<dxi-item>
<dxo-label text="Triple Price Per Person"></dxo-label>
<dx-number-box [(value)]="tripleRoomPrice" [min]="0"></dx-number-box>
</dxi-item>
<dxi-item>
<dxo-label text="Num. Triple Rooms"></dxo-label>
<dx-number-box [(value)]="tripleRoomCount" [min]="0"></dx-number-box>
</dxi-item>
<dxi-item>
<dxo-label text="Triple Room Total"></dxo-label>
<dx-number-box [value]="calculateTotal(tripleRoomPrice, tripleRoomCount)" [min]="0"></dx-number-box>
</dxi-item>
</dxi-item>

<dxi-item itemType="group" caption="Notes" [colCount]="1">
<dxi-item dataField="internalNote"></dxi-item>
<dxi-item dataField="details"></dxi-item>
<dxi-item dataField="supplierNote"></dxi-item>
</dxi-item>

</dxo-form>
</dxo-editing>

<dxi-column dataField="serviceDate" alignment="left" dataType="date" [format]="'dd MMM yyyy'"></dxi-column>
<dxi-column dataField="serviceTypeID" alignment="left" [setCellValue]="setCellValue">
<dxo-lookup [dataSource]="dataSourceServiceType" displayExpr="serviceTypeName" valueExpr="serviceTypeID">
</dxo-lookup>
</dxi-column>
<dxi-column dataField="serviceName" alignment="left"></dxi-column>
<dxi-column dataField="pax" alignment="right"></dxi-column>
<dxi-column dataField="servicePrice" alignment="right" [format]="{ type: 'currency' }"></dxi-column>

</dx-data-grid>


and my .ts file

customizeItem = (item: any): void => {
if (item.dataField === 'serviceTypeID') {

if (item.itemType === 'group' && item.caption === 'Room Prices') {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const gridInstance = this.dataGrid!.instance;
const editRowKey = gridInstance.option('editing.editRowKey');
const rowIndex = gridInstance.getRowIndexByKey(editRowKey);
const serviceTypeID = gridInstance.cellValue(rowIndex, 'serviceTypeID');

this.showRoom = this.servicesWithRooms.includes(serviceTypeID);
}

}
};

serviceTypeChanged = (e: any) => {
const selectedServiceType = e.value;

if (selectedServiceType === 3 || selectedServiceType === 4) {
this.showRoomPrices = true;
this.test = 'asd';
} else {
this.showRoomPrices = false;
this.test = 'hide-group';
}

this.getFormItems();
};
setCellValue(newData: any, value: any): void {
const column = (<any>this);
column.defaultSetCellValue(newData, value);
}

Continue reading...