title: Kendo Angular Grid Filter on UI Value
body: <p>I'm using Kendo UI for Angular 7 and I have filtering mostly up and working, however there is one thing I can't figure out.  I have a few of my fields that go through pipes to make the UI more user friendly.  For example I have a code in my objects that designates a software; when this is displayed in the grid it transforms the code into the full name of the software to make it easier for the user.</p>
  
  <p>Filtering on this column is working... but it is filtering based on the underlying code, not the UI displayed value.  So the user sees 'Keynote Manager' and tries to put 'Ke' into the filter and it doesn't find anything, because it's looking for 'KM' which is the underlying code.</p>
  
  <p>Is there a way to get it to filter based on the UI displayed/piped value rather than the underlying value before piping?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>Not sure if my specific code is really relevant as it's a more general question but here is my code as requested:</p>
  
  <p><em>Grid Definition</em></p>
  
  <pre><code>&lt;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"&gt;
          &lt;ng-template kendoGridNoRecordsTemplate&gt;&lt;div class="values" *ngIf="!IsLoading"&gt;No Licenses to Display&lt;/div&gt;&lt;/ng-template&gt;
          &lt;kendo-grid-column title="#" field="Seats" width="60" [filterable]="false"
                             [headerStyle]="{'text-align': 'center'}"
                             [style]="{'text-align': 'center'}"&gt;&lt;/kendo-grid-column&gt;
          &lt;kendo-grid-column title="Software" field="Software"&gt;
            &lt;ng-template kendoGridCellTemplate let-license&gt;{{ license.Software | softwareType }}&lt;/ng-template&gt;
          &lt;/kendo-grid-column&gt;
          &lt;kendo-grid-column title="Portable" field="IsPortable" filter="boolean"&gt;
            &lt;ng-template kendoGridCellTemplate let-license&gt;{{ license.IsPortable | titlecase }}&lt;/ng-template&gt;
          &lt;/kendo-grid-column&gt;
          &lt;kendo-grid-column title="Features" field="Features"&gt;
            &lt;ng-template kendoGridCellTemplate let-license&gt;{{ license.Features | features | titlecase }}&lt;/ng-template&gt;
          &lt;/kendo-grid-column&gt;
          &lt;kendo-grid-column title="Expiry" field="Expiry" filter="date" format="d"&gt;&lt;/kendo-grid-column&gt;
          &lt;kendo-grid-column title="Key" field="ID"&gt;
            &lt;ng-template kendoGridCellTemplate let-license&gt;{{ license.ID }}&lt;/ng-template&gt;
          &lt;/kendo-grid-column&gt;            
        &lt;/kendo-grid&gt;
  </code></pre>
  
  <p><em>Component Code</em></p>
  
  <pre><code>    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 =&gt; {
        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);
    }
  }
  </code></pre>
  
  <p><strong>Edit</strong></p>
  
  <p>Per the suggestion below I ended up changing my base level converter to set a new property on the class and filtered based on that using my original pipe:</p>
  
  <pre><code>private ConvertBaseToLicense(baseObject: any): License {
    const jsonConvert: JsonConvert = new JsonConvert();
    jsonConvert.operationMode = Constants.ConverterMode;
  
    const license = jsonConvert.deserializeObject&lt;License&gt;(baseObject, License);
    const SwPipe = new SoftwareTypePipe();
    license.UIName = SwPipe.transform(license.Software);
    return license;
  }
  </code></pre>