Kendo 具有旋转动态列的网格

Question

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

<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 子句没有按应有的方式运行。

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>

在编辑模式下（即单击单行旁边的编辑按钮时）只需切换该数据项的 isEditing 值。当您取消或保存并结束编辑时，再次切换它。您现在拥有 Kendo Angular:

的自定义枢轴网格

Kendo 具有旋转动态列的网格

Kendo Grid with pivoted dynamic columns

html

kendo-ui

kendo-grid

kendo-ui-angular2

angular