Angular Kendo: kendo-grid-column filter label for booleans

We're using Angular Kendo and in one of the tables (grid) we are rendering, the headers are filterable. One of the columns is bound to a boolean field, but we want to display appropriate strings instead of the raw boolean value (i.e. active vs true). The display of the actual property within each row is easy to handle via conditionals (i.e. {{ boolean-property ? "label 1" : "label 2"}} ), but the label is a bit trickier. Right now, this is how the filter looks:

enter image description here

My goal is to update the label with something more appropriate, I've checked the documentation and closest thing I could find was the format property which I'm unsure as to how it works for boolean values.

Does anyone have ideas on how to set the labels for the filter menu?


You can change the Labels for column's filter with:

<kendo-grid-column field="yourField" filter="boolean" title="Your title">
    <kendo-grid-messages
      filterIsTrue="Your label 1"
      filterIsFalse="Your label 2"
      >
    </kendo-grid-messages>
</kendo-grid-column>

Not sure about the change label template, but I found some customisation you can made to your boolean filter.

Basically it is using the kendo-switch components.enter image description here

Stackblitz Example


currently I am using version "@progress/kendo-angular-grid": "^3.12.1" and I was able to do the following to update the labels for the BooleanFilterMenuComponent

<kendo-grid
  #grid
  [data]="gridResult"
  [pageSize]="gridState.take"
  [skip]="gridState.skip"
  [sort]="gridState.sort"
  [sortable]="true"
  [pageable]="true"
  [filter]="gridState.filter"
  scrollable="scrollable"
  [selectable]="true"
  filterable="menu"
  [loading]="loading"
>
  <kendo-grid-messages filterIsFalse="Active" filterIsTrue="Inactive"></kendo-grid-messages>
  <!-- Some other column defs -->
    <kendo-grid-column title="Status" field="isDeleted">
    <ng-template kendoGridCellTemplate let-dataItem>
      {{dataItem.isDeleted ? 'Inactive' : 'Active'}}
    </ng-template>
    <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
      <kendo-grid-boolean-filter-menu [filter]="filter" [filterService]="filterService" [column]="column"></kendo-grid-boolean-filter-menu>
    </ng-template>
  </kendo-grid-column>
 </kendo-grid>

Here is the documentation to the CustomMessagesComponent which has several other options https://www.telerik.com/kendo-angular-ui/components/grid/api/CustomMessagesComponent/