Hello Telerik,
We have implemented a custom reusable filter cell component similar to the example of the multi-select checkbox example from the docs. The difficulty using that example however, is that when the filter is updated, the other filters in the grid are removed due to the use of filterservice.filter. Because the CompositeFilterDescriptor can contain both filters and composite filters, why does the base filter cell component's base methods not allow a CompositeFilterDescriptor to be provided to the UpdateFilter method?
protected filterByField(field: string): FilterDescriptor;
protected filtersByField(field: string): FilterDescriptor[];
protected removeFilter(field: string): CompositeFilterDescriptor;
protected updateFilter(filter: FilterDescriptor): CompositeFilterDescriptor;
protected applyFilter(filter: CompositeFilterDescriptor): void;
Our method for implementing the multi-checkbox filter cell was to build a composite filter using 'Or' logic and each selected value added as a filter descriptor with operator 'eq' and the selected item value as the value of the filter, and use a similar strategy as the base filter cell component to add this composite filter to the filter service's composite filter.
private getSelectedFilters(values: Item[]): CompositeFilterDescriptor {
const selected: FilterDescriptor[] = values.map((value) => {
return {
field: this.field,
operator: 'eq',
value: value.value,
};
});
return {
filters: selected,
logic: 'or',
};
}
public onChange(values: Item[]): void {
this.selectedValues = values;
const root = this.filter || {
filters: [],
logic: 'and',
};
this.removeFilter(this.field);
if (values !== null && values.length !== 0) {
root.filters.push(this.getSelectedFilters(values));
}
this.filterService.filter(root);
}
If the base filter cell component allowed the CompositeFilterDescriptor type or the FilterDescriptor type in the updateFilters method, we could simplify the logic in our filter cell component to be similar to the patterns shown in the drop-down list filter component example, as shown below, but with a composite filter descriptor such as the one generated by the above getSelectedFilters function.
this.applyFilter(
value === null // if value of the default item
? this.removeFilter(this.valueField) // remove the filter
: this.updateFilter({
// otherwise add/modify the filter for the field with the value
field: this.valueField,
operator: 'eq',
value,
})
); // and update the root filter
I think this would be a beneficial addition to the Kendo Angular2 product, as it would enable many more reusable filter components to be created more easily and also simplify/ enhance some of the existing examples you provide. If you would like more information or the full multiselect-filter component, I would be happy to supply it.
Thank you!