Question

期望的行为：Kendo网格具有“ 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

应用为角度/ 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

Kendo Grid语法-以编程方式添加超赞字体

1 个答案: