Angular Kendo：布尔值的 kendo-grid-column 过滤器标签

Question

我们正在使用 Angular Kendo，并且在我们正在渲染的其中一个表格（网格）中，标题是可过滤的。其中一列绑定到布尔字段，但我们希望显示适当的字符串而不是原始布尔值（即活动与真实）。每行中实际属性的显示很容易通过条件处理（即{{ boolean-property ? "label 1" : "label 2"}}），但标签有点棘手。现在，过滤器是这样的：

我的目标是用更合适的东西更新标签，我检查了文档，我能找到的最接近的是格式属性，我不确定它如何用于布尔值。

有没有人知道如何为过滤器菜单设置标签？

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

不确定更改标签模板，但我发现一些 customisation 可以用于布尔过滤器。

基本上它使用kendo-switch组件。

Stackblitz Example

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>