Create formgroup in kendo grid for "nested" fields

Question

I'm trying to edit in-cell a kendo grid element.

I have a kendo grid with columns defined like this:

<kendo-grid-column title="Beam ID" field="id" width="30px">
</kendo-grid-column>
<kendo-grid-column field="additional_info.name" title="Name">
</kendo-grid-column>

I followed the very first example of this link to implement an in-cell editing form: https://www.telerik.com/kendo-angular-ui/components/grid/editing/in-cell-editing/

defining the formgroup in this lines:

this.formBuilder.group({
 'id': dataItem.id,
 'additional_info.width': dataItem.additional_info.width
});

Everything works fine with the ID field and with every "one-level" fields. I cannot edit on the grid nested elements like additional_info.width.

I cann add that it seems just a matter of "form-position" because with some alert I understood that the "cell editing" starts with the click and ends clicking away from the column.

I tried everything. Any advice? Thx!

Answer 1

Not sure if you found an answer as its been half a year. Here is a good solution for you problem How to use formControlName and deal with nested formGroup?

But to summarize, when you create a formgroup with nested objects you have to create extra formgroups for those. Meaning you end up with a formgroup that has nested formgroups

    this.formBuilder.group({
        id: dataItem.id,
        additional_info: this.formBuilder.group({
           width: dataItem.additional_info.width
        })
    });

In some instances (I believe when you customize your columns with templates) you might also have to use the formControl to bind the correct values.

    <kendo-grid-column [title]="Age" filter="numeric" field="additional_info.age" editor="numeric">
         <ng-template kendoGridEditTemplate let-formGroup="formGroup">
            <kendo-numerictextbox
                (valueChange)="onAgeChange($event)"
                [formControl]="formGroup.get('additional_info.age')"
            >
            </kendo-numerictextbox>
         </ng-template>
    </kendo-grid-column>