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

Question

我們正在使用 Angular Kendo，在我們正在渲染的其中一個表格（網格）中，標題是可過濾的。 其中一列綁定到 boolean 字段，但我們希望顯示適當的字符串而不是原始的 boolean 值（即 active 與 true）。 每行中實際屬性的顯示很容易通過條件（即{{ boolean-property? "label 1": "label 2"}} ）處理，但 label 有點棘手。 現在，這是過濾器的樣子：

我的目標是用更合適的東西更新 label，我檢查了文檔，我能找到的最接近的東西是 format 屬性，我不確定它如何用於 boolean 值。

有沒有人知道如何為過濾器菜單設置標簽？

Answer 1

您可以使用以下方法更改列過濾器的標簽：

<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

不確定更改標簽模板，但我發現您可以對布爾過濾器進行一些自定義。

基本上它使用的是kendo-switch組件。

Stackblitz 示例

Answer 3

目前我正在使用版本"@progress/kendo-angular-grid": "^3.12.1" ，我能夠執行以下操作來更新 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>

這是 CustomMessagesComponent 的文檔，其中有幾個其他選項https://www.telerik.com/kendo-angular-ui/components/grid/api/CustomMessagesComponent/

Answer 4

kendo 提供了可過濾的消息屬性，我們可以使用它。

filterable:{
     messages:{
          IsFalse : 'label-1',
          IsTrue : 'label-2'
     }
}

在劍道網格選項中使用它。

Answer 5

您可以使用 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;
        }
    }

並添加到 app.module.ts：

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

Answer 6

與 Georgi Georgiev 的答案幾乎相同，但隨后將 kend-grid-messages 應用於整個網格。 如果您有 2 個或更多具有不同標簽的布爾過濾器列，則需要將 kend-grid-messages 放入 kendoGridFilterCellTemplate 中，如下所示。

<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 7

此鏈接幫助我找到解決方案https://stackblitz.com/edit/kendo-ui-custom-column-filter-pave1r?file=src%2Fapp%2Fregex-filter-component%2Fregex-filter-component.component。 TS

這是我的代碼：

<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 是一個數組，我在其中為每一列設置了屬性

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;
 }