Как включить редактирование в ячейке для столбца сетки кендо (поле сложного объекта) - PullRequest
Новая
       23

Как включить редактирование в ячейке для столбца сетки кендо (поле сложного объекта)

0 голосов
/ 29 марта 2019

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

В частности, я хотел бы иметь возможность редактировать три столбца ( Title , cfTrade).TradeTotalVatValue , cfTrade.TradeTotalNetValue ) и вычислите столбец ( cfTrade.TradeTotalValue ) из столбцов ( cfTrade.TradeTotalVatValue , cfTradeVTrade.Tot1014 *).

Пожалуйста, найдите мой 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).Я попытался kendoGridEditTemplate для столбца Заголовок и, кажется, работает должным образом (ошибки не возникает).Как мне достичь желаемой функциональности?

Заранее спасибо.

...