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:
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.
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/