html - 具有旋转动态列的 Kendo Grid

Question

我正在尝试使用 Angular 生成具有动态生成列的 Kendo Grid。但是，我想匹配与该列对应的正确股票代码。这是我的代码：

<kendo-grid-column *ngFor="let column of tickerColumns" field="quantity" title="{{column.ticker}}">
<ng-template kendoGridEditTemplate let-dataItem="dataItem">
    <input *ngIf="dataItem.ticker == column.ticker"
           [(ngModel)]="dataItem.quantity"
           [ngModelOptions]="{standalone: true}" class="k-textbox" required />
</ng-template>
</kendo-grid-column>

该tickerColumns数组只是一个包含三个股票代码的数组。主要数据结构如下所示：

但是，结果不是我所期望的，好像 ngIf 子句没有发挥应有的作用。

标签： htmlangularkendo-uikendo-gridkendo-ui-angular2

Answer 1

我在 Telerik 的人员的帮助下解决了这个问题，他们指示我使用kendoGridCellTemplate而不是kendoGridEditTemplate指令。但是这样做，即使您不编辑该行，单元格也将始终是可编辑的。您必须在视图模型中拥有一个isEditing属性（我已经拥有）并使用此布尔值来启用或禁用包含如下值的文本框：

HTML

    <kendo-grid-column field="quantity" title="{{column.ticker}}" *ngFor="let column of tickerColumns;">
      <ng-template kendoGridCellTemplate let-dataItem>
          <input *ngIf="dataItem.ticker == column.ticker"
                 [disabled]="!dataItem.isEditing"
                 [(ngModel)]="dataItem.quantity"
                 [ngModelOptions]="{standalone: true}" class="k-textbox" required />
      </ng-template>
    </kendo-grid-column>

在编辑模式下（即单击单行旁边的编辑按钮时）只需切换该 dataItem 的 isEditing 值。当您取消或保存并结束编辑时，再次切换它。您现在拥有 Kendo Angular 的自定义枢轴网格：