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>
`,
})
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);
}
}
