Filter with dropdownlist of objects not displaying chosen option

[Jake]

I used this page https://www.telerik.com/kendo-angular-ui/components/filter/expression-value-template as a reference to get a filter working on my application.  We have a list of objects that have a name and id, used as the the text and value of the drop down.  Selecting an option sets the filter option correctly and filters the list, but the drop down list does not show that any options have been selected.  Is this just an issue with object dropdownlists on filters?

 

I couldn't get stackblitz to work, but here's an example that produces the issue.

import { Component } from '@angular/core';

import { DropDownListModule } from '@progress/kendo-angular-dropdowns';

import { FilterModule } from '@progress/kendo-angular-filter';

import {

  CompositeFilterDescriptor,

  FilterDescriptor,

} from '@progress/kendo-data-query';

@Component({

  selector: 'app-filter-test',

  standalone: true,

  imports: [FilterModule, DropDownListModule],

  template: `

<kendo-filter #filter [value]="filterDescriptor" (valueChange)="onFilterChange($event)">

<kendo-filter-field field="partnerId" title="Partner" editor="string" [operators]="['eq', 'neq']">

    <ng-template kendoFilterValueEditorTemplate let-currentItem>

        <kendo-dropdownlist

            [data]="businessNames"

            (valueChange)="editorValueChange($event, currentItem, filter.value)"

            textField="name"

            valueField="id"></kendo-dropdownlist>

    </ng-template>

</kendo-filter-field>

</kendo-filter>

`,

})

export class FilterTestComponent {

  private _businessEntities: { id: number; name: string }[] = [

    { id: 1, name: 'Test' },

  ];

  public filterDescriptor: CompositeFilterDescriptor = {

    logic: 'and',

    filters: [],

  };

  public get businessNames(): { id: number; name: string }[] {

    return this._businessEntities;

  }

  constructor() {}

  public onFilterChange(value: CompositeFilterDescriptor): void {

    this.filterDescriptor = value;

  }

  public editorValueChange(

    value: any,

    currentItem: FilterDescriptor,

    filterValue: CompositeFilterDescriptor

  ): void {

    currentItem.value = value.id;

    this.onFilterChange(filterValue);

  }

}

[Georgi]

Hi Jake,

Thank you very much for the details provided.

From what I understand from your question, you are currently utilizing the Kendo UI for Angular Filter together with the built-in FilterValueEditorTemplateDirective and are experiencing issues with persisting the value in the custom filter value control. Please, let me know if I misinterpreted the query.

Thanks to the code snippet provided in the thread, I indeed noticed the issue with persisting the value in the custom value field control. Upon further investigation, I noticed that the root cause for the discrepancy was the following expression:

this.filterDescriptor = value;

which is called in the onFilterChange() method.

What I would suggest as an alternative approach to updating the filters in the filterDescriptor object would be the following approach:

this.filterDescriptor.filters = filterValue.filters;

To better illustrate the suggested approach, here is a StackBlitz demo that implements it:

• https://stackblitz.com/edit/angular-w7lvhgkh

In case none of the above-mentioned information helps you achieve the desired behavior for the Filter component, I would ask you to provide more detailed information about the expected result. This would allow me to gain a better understanding of the exact scenario and thus come up with a more suitable suggestion.

I hope this helps. Please, let me know if I am missing out on something.

Regards,
Georgi
Progress Telerik

 

[Jake]

That worked, it makes sense that I was overriding something by setting the whole CompositeFilterDescriptor object instead of just the filter part.

[Georgi]

Hi Jake,

I am happy to hear that my previous response helped you achieve the desired behavior for the Filter component.

I am now closing this thread. Please, do not hesitate to reach out if you need any more details.

Regards,
Georgi
Progress Telerik