基於 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)，並允許用戶從下拉列表中進行選擇。