Kendo UI Ячейка в стиле сетки на основе значения шаблона - PullRequest
Новая
       44

Kendo UI Ячейка в стиле сетки на основе значения шаблона

0 голосов
/ 20 февраля 2019

Я хотел бы установить cellStyle определенной ячейки на основе ее значения.

Если Статус == STARTED , я хочу, чтобы фон был зеленым,

Если Статус == ОСТАНОВЛЕН , я хочу, чтобы фон был красным.

рассмотрим эту таблицу: 

   <kendo-grid [data]="gridData" style="height: 200px">
     <kendo-grid-column field="machineName" title="Machine">
     </kendo-grid-column>
     <kendo-grid-column field="article" title="Article">
     <ng-template kendoGridCellTemplate let-dataItem>
      {{dataItem.article}}
     </ng-template>
     </kendo-grid-column>
     <kendo-grid-column field="status" title="Status">
     </kendo-grid-column>
   </kendo-grid>

Я пытался использовать условные [ngClass] и [ngStyle], но ни один из них не работает, естественно, я думаю, что на данный момент у меня нет доступа к значению шаблонов, но только внутри тега <kendo-grid-column>.Доступ к текущему значению столбцов сетки кажется сложнее, чем я думал.Тем не менее, это представляется возможным для строк:

Это вполне возможно сделать, если бы я применил стилизацию к ng-шаблону, но это не будет стилизовать весь gridCell.

Вот стеблиц, демонстрирующий то, что я хочу: https://q12mgf.run.stackblitz.io.

Если вы хотите поиграть с исходным кодом самостоятельно, вот оно: https://stackblitz.com/edit/angular-e5dgt2?file=app%2Fapp.component.ts

TL; DR - Как оформить ВСЮ ячейку на основе значения Status '.started = green & stopped = red.

API: https://www.telerik.com/kendo-angular-ui/components/grid/styling/

Ресурсы: https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/style-rows-cells-based-on-data-item-values

1 Ответ

0 голосов
/ 20 февраля 2019

Вы можете оформить ячейку на основе rowClass.( Справочник по API )

Путем условного (на основе элемента данных) добавления класса ко всей строке и стилизации ячейки на основе этого класса.

component.ts 

@Component({...})
export class MyComponent {
    ...

    public rowClassCallback = (context: RowClassArgs) => {
        switch (context.dataItem.status) {
            case 'Started':
                return { started : true };
             case 'Stopped':
                return { stopped : true };
             default:
                return { };
        }
    }
}

component.html 

<kendo-grid [data]="gridData" [rowClass]="rowClassCallback">
    <kendo-grid-column field="status" title="Status" class="statusColumn">
    </kendo-grid-column>
    ...
</kendo-grid>

component.css 

.started .statusColumn { background-color: green; }
.stopped .statusColumn { background-color: red; }

Я также подготовил пример .

...