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

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

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

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

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

Все перепробовала. Любой совет? Спасибо!


angular kendo-grid formgroups kendo-ui
person David    schedule 27.12.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

    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>
person nedved11    schedule 17.07.2019
comment
Спасибо большое, недвед11! Я нашел решение, но не уверен, что оно лучшее. Я попробую, как только у меня будет время. Цените время, которое вы потратили на ответ. - person David; 18.07.2019