Kendo Grid Syntax - Adding Font-Awesome Icon Programmatically

Question

Desired behavior: Kendo grid has column for "isActive?" which is populated by a green fas-fa-clock icon if isActive == true and by grey far-fa-clock if false. The icon has an onClick to toggle between t/f.

Current behavior: Grid exists and populates the field with the word true or false.

code:

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>

The spriteCssClass does nothing. I'm not sure how to get this to do this correctly.

It's also all created in html - a convention which none of the stuff I've read has seemed to support.

Resources:

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

App is Angular/ts

Anybody know the correct syntax for this?

Did you look at column cell templates: telerik.com/kendo-angular-ui/components/grid/columns/templates — ezanker

topalkata topalkata · Accepted Answer · 2018-10-27T07:08:18

All linked Kendo UI resources are for Kendo UI for jQuery while the question seems to be about Kendo UI for Angular?

As already suggested, check out the cell templates example, you will also need to load the 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 Syntax - Adding Font-Awesome Icon Programmatically

1 Answers