Создать группу форм в сетке кендо для «вложенных» полей

Question

Я пытаюсь отредактировать в ячейке элемент сетки кендо.

У меня есть сетка кендо со столбцами, определенными так:

<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>

Я следовал самому первому примеруэта ссылка для реализации формы редактирования в ячейке: https://www.telerik.com/kendo-angular-ui/components/grid/editing/in-cell-editing/

определение группы форм в следующих строках:

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

Все отлично работает с полем ID и с каждым "одноуровневым"поляЯ не могу редактировать на сетке вложенные элементы, такие как Additional_info.width.

Я не могу добавить, что это просто вопрос формы-позиции, потому что с некоторым предупреждением я понял, что «редактирование ячейки» начинается с щелчкаи заканчивает клик вдали от столбца.

Я попробовал все.Любой совет?Thx!

Answer 1

Не уверен, что вы нашли ответ, так как прошло полгода.Вот хорошее решение для вашей проблемы Как использовать formControlName и иметь дело с вложенной формой группы?

Но подведем итог: когда вы создаете группу форм с вложенными объектами, вы должны создать дополнительные группы форм для этих групп.,Это означает, что в итоге вы получите группу форм с вложенными группами форм

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

В некоторых случаях (я полагаю, когда вы настраиваете свои столбцы с помощью шаблонов), вам также может понадобиться использовать formControl для привязки правильных значений.

    <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>