Кендо Сетка с поворотными колоннами c - PullRequest
Новая
       58

Кендо Сетка с поворотными колоннами c

0 голосов
/ 17 февраля 2020

Я пытаюсь сгенерировать Kendo Grid с динамически генерируемыми столбцами, используя Angular. Однако я хочу сопоставить правильный символ тикера, соответствующий столбцу. Вот мой код: 

<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 - это просто массив, содержащий три символа тикера. Основная структура данных выглядит следующим образом:

enter image description here

Однако результат не тот, который я ожидал, как будто предложение ngIf не действует как это должно.

enter image description here

1 Ответ

0 голосов
/ 21 февраля 2020

Я решил проблему, используя небольшую помощь от людей из 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 для этого dataItem. Когда вы отменяете или сохраняете и заканчиваете редактирование, переключите его снова. Теперь у вас есть настраиваемая сводная сетка для кендо Angular:

enter image description here

...