Синтаксис Kendo Grid - добавление Font-Awesome Icon программным способом

Question

Желаемое поведение: в сетке кендо есть столбец для "isActive?"который заполняется зеленым значком fas-fa-clock, если isActive == true, и серым far-fa-clock, если false.Значок имеет onClick для переключения между t / f.

Текущее поведение: Сетка существует и заполняет поле словом true или false.

code:

компонент.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 предназначены для Kendo UI для jQuery, хотя вопрос, похоже, касается Kendo UI для Angular?

Как уже предлагалось, посмотрите пример шаблонов ячеек , вам также нужно загрузить 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>

Пример