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

Question

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?

Answer 1

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>

Answer 2

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

Answer 3

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/

Answer 4

you can use MessageService kendo-localization.service.ts:

import {Injectable} from '@angular/core';
    import {LocalizationService, MessageService} from '@progress/kendo-angular-l10n';
    
    const data = {
        en: {
            messages: {
                'filterIsTrue': 'is true',
                'filterIsFalse': 'is false',
            }
        }
    };
    
    @Injectable()
    export class KendoLocalizationService extends MessageService {
        public set language(value: string) {
            const lang = data[value];
            if (lang) {
                this.localeId = value;
            }
        }
    
        public get language(): string {
            return this.localeId;
        }
    
        private localeId = 'en';
    
        private get messages(): any {
            const lang = data[this.localeId];
            if (lang) {
                return lang.messages;
            }
        }
    
        public get(key: string): string {
            return this.messages[key] ?? key;
        }
    }

and add to app.module.ts:

providers: [
    {provide: LocalizationService, useClass: KendoLocalizationService},
]

Answer 5

Almost the same answer as Georgi Georgiev, but then the kend-grid-messages is applied to the whole grid. If you have 2 or more boolean filter columns with different labels you need to put kend-grid-messages inside kendoGridFilterCellTemplate like below.

<kendo-grid-column field="myField" title="MyField">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <kendo-grid-messages filterIsTrue="Filter true label"
            filterIsFalse="Filter false label">
        </kendo-grid-messages>
        <kendo-grid-boolean-filter-cell [column]="column" [filter]="filter">
        </kendo-grid-boolean-filter-cell>
    </ng-template>
</kendo-grid-column>

Answer 6

This link helped me to find the solution https://stackblitz.com/edit/kendo-ui-custom-column-filter-pave1r?file=src%2Fapp%2Fregex-filter-component%2Fregex-filter-component.component.ts

here is my code:

<ng-container *ngFor="let columnConfig of ColumnsConfig">
    <kendo-grid-column
      [filterable]="columnConfig.filterable"
      [filter]="columnConfig.filter"
      [field]="columnConfig.field"
      [title]="columnConfig.title">
    <ng-template kendoGridFilterMenuTemplate 
    *ngIf="columnConfig.isYesNo" let-column="column" let-filter="filter" let-filterService="filterService">
    <app-boolean-filter-template-for-grid field="{{column.field}}" [currentFilter]="filter" [filterService]="filterService"
          yesFilterMessage="{{columnConfig.yesFilterMessage | translate}}" noFilterMessage="{{columnConfig.noFilterMessage| translate}}"> 
    </app-boolean-filter-template-for-grid>
    </ng-template>
  </kendo-grid-column>
 </ng-container>
 


@Component({
  selector: 'app-boolean-filter-template-for-grid',
 template: '
   <input type="radio" id="{{field}}-filter" name="{{field}}" value="true" 
      (input)="inputValuechange(true)"
      [checked]="filterValue == true ? 'checked': null">
    <label for="{{field}}-filter" >{{yesFilterMessage}}</label>

    <input type="radio" id="{{field}}-filter" name="{{field}}" value="false" 
     (input)="inputValuechange(false)"
     [checked]="filterValue == false ? 'checked': null">
    <label for="{{field}}-filter" >{{noFilterMessage}}</label>
  ',
})
export class BooleanFilterTemplateForGridComponent implements OnInit {
 
  @Input() public field;
  @Input() public currentFilter;
  @Input() public filterService;
  @Input() public noFilterMessage = 'NO';
  @Input() public yesFilterMessage = 'YES';

  public filterValue = undefined;

  constructor() { }

  ngOnInit(): void {
    let currentFilterValue = this.currentFilter.filters[0] as FilterDescriptor;
    if(currentFilterValue) {
      this.filterValue = currentFilterValue.value;
    }
  }

  inputValuechange(val){
    this.filterValue = val;
    this.handleFilterValueInput();
  }
  
  private _regexFilterFunction = function(item, value) {
    const regexp = new RegExp(value);
    return regexp.test(item);
  }
  public handleFilterValueInput(): void {
    const regexFilter = {
      field: this.field,
      operator: this._regexFilterFunction,
      value: this.filterValue
    };
    this.filterService.filter({
      filters: [regexFilter],
      logic: 'or'
    });
  }
}

ColumnsConfig is an array where I have set properties for each column

export class ColumnConfigSettings {
  title: string = '';
  field: string ='';
  filterable: boolean;
  filter?: 'string' | 'numeric' | 'date' | 'boolean';
  format?: string;
  width?: number;
  hidden?: boolean;
  isYesNo: boolean = false;
  yesFilterMessage?: string;
  noFilterMessage?: string;
 }

Answer 7

kendo is providing filterable with messages property we can use it.

filterable:{
     messages:{
          isTrue : 'label-1',
          isFalse : 'label-2'
     }
}

Use this inside the kendo grid options.