如何为Kendo网格列（复杂对象字段）启用单元内编辑

Question

我正在使用kendo网格显示服务响应中的远程数据，并希望对某些列启用单元内编辑，并对其他列进行一些计算。完成编辑后，用户操作（例如按钮）应完成该过程。

更具体地说，我希望能够编辑三列（标题， cfTrade.TradeTotalVatValue ， cfTrade.TradeTotalNetValue ）并进行计算列（ cfTrade.TradeTotalVatValue ， cfTrade.TradeTotalNetValue ）中的列（ cfTrade.TradeTotalValue ）。

请在下面找到我的html

<kendo-grid-column field="Title" title="{{lbl_ColTitle}}" class="editableGridCell"></kendo-grid-column>
                        <kendo-grid-column field="cfTrade.TradeDate" title="{{lbl_ColTradeDate}}" class="editableGridCell" filter="date">
                            <ng-template kendoGridCellTemplate let-dataItem>
                                {{dataItem.cfTrade.TradeDate | date:'dd/MM/yyyy'}}
                            </ng-template>
                            <ng-template kendoGridEditTemplate let-dataItem>
                                <kendo-datepicker [min]="minTradeDate"
                                                  [max]="maxTradeDate"
                                                  [(value)]="valueTradeDate"
                                                  [(ngModel)]="dataItem.date"
                                                  name="date"
                                                  (focus)="handleTradeDateFocus()">
                                </kendo-datepicker>
                            </ng-template>
                        </kendo-grid-column>
                        <kendo-grid-column field="cfSupplier.cfTrader.VatNumber" title="{{lbl_ColVatNumber}}"></kendo-grid-column>
                        <kendo-grid-column field="cfSupplier.Title" title="{{lbl_ColTraderName}}">
                            <ng-template kendoGridCellTemplate let-dataItem>
                                {{dataItem.cfSupplier.Title}}
                                <button aria-label="selectSupplier" *ngIf="isPendingDocument && (mySelection == dataItem.ID)" class="primaryButton" (click)="selectSupplier()"><span class='k-icon k-i-more-horizontal'></span></button> <!--style="display: inline-block; position: absolute; right: 12px"-->
                            </ng-template>
                        </kendo-grid-column>
                       <kendo-grid-column field="cfTrade.TradeTotalQty" title="{{lbl_ColTotalQty}}" filter="numeric"></kendo-grid-column>
                        <kendo-grid-column field="cfTrade.TradeTotalDiscValue" title="{{lbl_ColDiscAmount}}" filter="numeric" format="{0:n2}"></kendo-grid-column>
                        <kendo-grid-column field="cfTrade.TradeTotalVatValue" class="editableGridCell" title="{{lbl_ColVatAmount}}" filter="numeric" format="{0:n2}" [editable]="!APsService.isLoading && isPendingDocument" editor="numeric">
                            <ng-template kendoGridEditTemplate let-dataItem let-column="column" let-formGroup="formGroup">
                                <kendo-numerictextbox [decimals]="2"
                                                      [formControl]="formGroup.get(column.field)"
                                                      (focus)="onTradeTotalVatValueFocus(dataItem)"
                                                      (blur)="onTradeTotalVatValueBlur(dataItem)"
                                                      (valueChange)="onTradeTotalVatValueChange($event)">
                                </kendo-numerictextbox>
                                </ng-template>
                        </kendo-grid-column>
                        <kendo-grid-column field="cfTrade.TradeTotalNetValue" title="{{lbl_ColNetAmount}}" filter="numeric" format="{0:n2}"></kendo-grid-column>
                        <kendo-grid-column field="cfTrade.TradeTotalValue" class="editableGridCell" title="{{lbl_ColTotalAmount}}" filter="numeric" format="{0:n2}">
                            <ng-template kendoGridCellTemplate let-dataItem>
                                {{dataItem.cfTrade.TradeTotalValue | number:'1.0-2'}}
                                <span *ngIf="dataItem.cfTrade.Synced" title="{{lbl_Synced}}" class='k-icon k-i-arrow-60-up rightFloat' style="color: green"></span>
                            </ng-template>
                        </kendo-grid-column>

请在下面找到我的提示：

public createFormGroup(dataItem: any): FormGroup {
    return this.formBuilder.group({
        Title: dataItem.Title,
        TradeTotalVatValue: dataItem.cfTrade.TradeTotalVatValue
        TradeTotalNetValue: dataItem.cfTrade.TradeTotalNetValue,
        TradeTotalValue: dataItem.cfTrade.TradeTotalValue
    });
}

//public createFormGroup = (dataItem: any) => new FormGroup({
//    'Title': new FormControl(dataItem.Title),
//    'cfTrade.TradeTotalVatValue': new FormControl(dataItem.cfTrade.TradeTotalVatValue)
//});

使用上面发布的代码，发生错误 错误错误：找不到具有未指定名称属性的控件 。

如果我没记错，则由于[formControl]="formGroup.get(column.field)"会发生错误，因为此列的字段是一个复杂的对象（cfTrade.TradeTotalVatValue）。我尝试对 Title 列使用 kendoGridEditTemplate ，它似乎按预期工作（没有错误）。如何实现所需的功能？

谢谢。