Фильтр угловой сетки Kendo по значению пользовательского интерфейса - PullRequest
Новая
       11

Фильтр угловой сетки Kendo по значению пользовательского интерфейса

1 голос
/ 14 июня 2019

Я использую Kendo UI для Angular 7, и у меня есть фильтрация в основном и работает, однако есть одна вещь, которую я не могу понять. У меня есть несколько полей, которые проходят через каналы, чтобы сделать пользовательский интерфейс более удобным для пользователя. Например, у меня есть код в моих объектах, который обозначает программное обеспечение; когда это отображается в сетке, оно преобразует код в полное имя программного обеспечения, чтобы упростить его для пользователя.

Фильтрация по этому столбцу работает ... но это фильтрация на основе базового кода, а не отображаемого значения пользовательского интерфейса. Поэтому пользователь видит «Keynote Manager» и пытается вставить «Ke» в фильтр, но ничего не находит, потому что ищет «KM», который является базовым кодом.

Есть ли способ настроить фильтр на основе отображаемого / переданного по интерфейсу значения пользовательского интерфейса, а не базового значения перед передачей?

Редактировать

Не уверен, что мой конкретный код действительно актуален, так как это более общий вопрос, но вот мой код по запросу:

Определение сетки 

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

1 Ответ

1 голос
/ 17 июня 2019

Фильтрация будет осуществляться против источника данных сетки, но я думаю, что есть несколько способов достичь того, что вы ищете, хотя ни один из них не является именно тем, что вы хотите.

Самый простой подход - изменить GetLicenses(), добавив в ваши данные дополнительный столбец, содержащий «Keynote Manager» и другие значения либо в источнике, либо при возврате данных, а затем связать с этим столбцом.

Другой подход заключается в добавлении пользовательского фильтра в вашу сетку, где вы можете хранить пары кодов ключ-значение (KM) и понятные описания (Keynote Manager) и разрешать пользователю выбирать из выпадающего списка. .

...