Kendo Angular Filter Dropdown list template not appearing

I’m trying to use the Kendo Angular Filter to build a selection of Kendo dropdown list boxes. The number of different type of filters is database driver thus the filters will have to be dynamically built from data.

I am trying to get the below sample code working which will contain 2 filters for Fruit & Color. The controls displays but the dropdown list does not appear.

What am I doing wrong?

• HTML file

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

<ng-container *ngFor="let item of dropDownListConfig">
<ng-template let-currentItem #myTemplate>
<kendo-dropdownlist
[data]="item.data"
(valueChange)="editorValueChange($event, currentItem, filter.value)"
>
</kendo-dropdownlist>
</ng-template>
</ng-container>

• TS Module

import { FilterExpression } from "@progress/kendo-angular-filter";
import { Component, ViewChildren, QueryList, AfterViewInit, TemplateRef, ChangeDetectorRef } from '@angular/core';
import { FilterDescriptor, CompositeFilterDescriptor } from '@progress/kendo-data-query';

interface DropDownListConfig {
data: string [];
};

@Component({
selector: 'dynamic-rule-list',
templateUrl: './dynamic-rule-list.component.html',
styleUrls: [ './dynamic-rule-list.component.scss'],
})

export class WealthClientGroupDynamicRuleListComponent implements AfterViewInit {
@ViewChildren("myTemplate") templates: QueryList<TemplateRef<any>>;

constructor(private _cdr: ChangeDetectorRef) {}

public ngAfterViewInit(): void {
this._cdr.detectChanges();
const templatesArray = this.templates.toArray();

//Assign the templates to the filters
for (let i = 0; i < this.filters.length; i++) {
this.filters.editorTemplate = templatesArray;
}
}

public onFilterChange(value: CompositeFilterDescriptor): void {
console.log(value);
}

public editorValueChange(
value :any,
currentItem: FilterDescriptor,
filterValue: CompositeFilterDescriptor
): void {
currentItem.value = value;
console.log(filterValue);
}

public dropDownListConfig: DropDownListConfig[] = [
{ data: ['Apple', 'Oranges', 'Pear'] },
{ data: ['Red', 'Green', 'Blue'] }
]

public filters: FilterExpression[] = [
{
field: "fruit",
title: "Fruit",
editor: "string",
operators: ["neq", "eq", "contains"],
},
{
field: "color",
title: "Color",
editor: "string",
operators: ["neq", "eq", "contains"],
}
];
}



Tried looking on the net & CoPilot, but couldn't find a solution!

Continue reading...