Kendo Grid 语法 - 以编程方式添加 Font-Awesome 图标

Question

期望的行为：剑道网格有“isActive？”列如果 isActive == true 则由绿色 fas-fa-clock 图标填充，如果为 false 则由灰色 far-fa-clock 填充。该图标有一个 onClick 在 t/f 之间切换。

当前行为：网格存在并使用单词 true 或 false 填充字段。

代码：

component.html

<kendo-grid [data]="gridView" [sortable]="{ allowUnsort: true, mode: 'single' }" [sort]="sort"
                (sortChange)="sortChange($event)" [height]="auto">
      <kendo-grid-column field="someItems" title="items" width=7>
      </kendo-grid-column>
      <kendo-grid-column field="isActive" title="A?" width="4" spriteCssClass="fa fa-flag-checkered">
      </kendo-grid-column>
      <kendo-grid-column field="moreItems" title="items" width="4">
      </kendo-grid-column>
    </kendo-grid>

spriteCssClass 什么都不做。我不知道如何让它正确地做到这一点。

它也是用 html 创建的——我读过的任何东西似乎都不支持这种约定。

资源：

https://fontawesome.com/icons/clock?style=solid

https://docs.telerik.com/kendo-ui/controls/navigation/menu/how-to/using-fontawesome-icons

https://docs.telerik.com/kendo-ui/controls/hybrid/styles/icons

https://www.telerik.com/forums/adding-images-to-a-column-in-kendo-grid

应用是 Angular/ts

有人知道这个的正确语法吗？

Answer 1

所有链接的 Kendo UI 资源都用于 jQuery 的 Kendo UI，而问题似乎是关于 Angular 的 Kendo UI？

如前所述，查看cell templates example，您还需要加载 FontAwesome CSS：

<kendo-grid-column field="Discontinued">
          <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
            <i class="fa fa-flag-checkered" [style.color]="dataItem.Discontinued ? 'grey': 'green'" aria-hidden="true" (click)="dataItem.Discontinued = !dataItem.Discontinued"></i>
          </ng-template>
        </kendo-grid-column>

EXAMPLE