基于 UI 值的 Kendo Angular Grid 过滤器

Question

我正在将 Kendo UI 用于 Angular 7，并且我已经进行了大部分过滤和工作，但是有一件事我无法弄清楚。 我的一些字段通过管道使 UI 更加用户友好。 例如，我的对象中有一个指定软件的代码； 当它显示在网格中时，它会将代码转换为软件的全名，以方便用户使用。

在此列上进行过滤正在起作用...但它是基于底层代码而不是 UI 显示值进行过滤。 因此，用户看到“Keynote Manager”并尝试将“Ke”放入过滤器中，但没有找到任何内容，因为它正在寻找“KM”，这是底层代码。

有没有办法让它根据 UI 显示/管道值而不是管道之前的基础值进行过滤？

编辑

不确定我的特定代码是否真的相关，因为它是一个更一般的问题，但这是我要求的代码：

网格定义

<kendo-grid [data]="GridData" style="height: 100%" (detailExpand)="GetSessions($event.dataItem)"
                  [reorderable]="true" [resizable]="true"
                  [sortable]="{allowUnsort: true, mode: 'single'}" [sort]="State.sort"
                  [filterable]="true"
                  [filter]="State.filter"
                  (dataStateChange)="dataStateChange($event)"
                  [loading]="IsLoading">
        <ng-template kendoGridNoRecordsTemplate><div class="values" *ngIf="!IsLoading">No Licenses to Display</div></ng-template>
        <kendo-grid-column title="#" field="Seats" width="60" [filterable]="false"
                           [headerStyle]="{'text-align': 'center'}"
                           [style]="{'text-align': 'center'}"></kendo-grid-column>
        <kendo-grid-column title="Software" field="Software">
          <ng-template kendoGridCellTemplate let-license>{{ license.Software | softwareType }}</ng-template>
        </kendo-grid-column>
        <kendo-grid-column title="Portable" field="IsPortable" filter="boolean">
          <ng-template kendoGridCellTemplate let-license>{{ license.IsPortable | titlecase }}</ng-template>
        </kendo-grid-column>
        <kendo-grid-column title="Features" field="Features">
          <ng-template kendoGridCellTemplate let-license>{{ license.Features | features | titlecase }}</ng-template>
        </kendo-grid-column>
        <kendo-grid-column title="Expiry" field="Expiry" filter="date" format="d"></kendo-grid-column>
        <kendo-grid-column title="Key" field="ID">
          <ng-template kendoGridCellTemplate let-license>{{ license.ID }}</ng-template>
        </kendo-grid-column>            
      </kendo-grid>

组件代码

    import {Component, OnInit} from '@angular/core';
import {License} from '../Classes/license';
import {LicenseService} from '../license.service';
import {StandaloneActivation} from '../Classes/StandaloneActivation';
import {LicenseUsageBase} from '../Classes/LicenseUsageBase';
import {UserService} from '../user.service';
import {Session} from '../Classes/Session';
import {State, process} from '@progress/kendo-data-query';
import {DataStateChangeEvent, GridDataResult} from '@progress/kendo-angular-grid';

@Component({
  selector: 'app-licenses',
  templateUrl: './licenses.component.html',
  styleUrls: ['./licenses.component.css']
})
export class LicensesComponent implements OnInit {
  // TODO: Allow release of multiple licenses at a time
  Licenses: License[];

  GridData: GridDataResult;

  State: State = {
    skip: 0,
    sort: [{field: 'Software', dir: 'asc'}],
    filter: {
      logic: 'and',
      filters: []
    }
  };
  IsLoading = true;

  constructor(private licenseService: LicenseService,
              private userService: UserService) {
  }

  ngOnInit() {
    this.GetLicenses();
  }

  GetLicenses(): void {
    this.licenseService.GetLicenses().subscribe(licenses => {
      this.Licenses = licenses;
      this.GridData = process(this.Licenses, this.State);
      this.IsLoading = false;
    });
  }   

  public dataStateChange(state: DataStateChangeEvent): void {
    this.State = state;
    this.GridData = process(this.Licenses, this.State);
  }
}

编辑

根据下面的建议，我最终更改了我的基本级别转换器以在类上设置一个新属性，并使用我的原始管道根据该属性进行过滤：

private ConvertBaseToLicense(baseObject: any): License {
  const jsonConvert: JsonConvert = new JsonConvert();
  jsonConvert.operationMode = Constants.ConverterMode;

  const license = jsonConvert.deserializeObject<License>(baseObject, License);
  const SwPipe = new SoftwareTypePipe();
  license.UIName = SwPipe.transform(license.Software);
  return license;
}

Answer 1

过滤将针对网格的数据源，但我认为有几种方法可以实现您正在寻找的内容，尽管它们都不是您想要的。

最简单的方法是修改GetLicenses()以向包含“Keynote Manager”和源中或返回数据时的其他值的数据添加额外的列，然后绑定到此列。

另一种方法是将自定义过滤器添加到您的网格中，您可以在其中保留您的键值对代码 (KM) 和友好描述 (Keynote Manager)，并允许用户从下拉列表中进行选择。