Custom filter menu issues updating currentFilter

[Rebeca]

Hi, there, so atm I'm trying to implement a custom filter menu, with kendo multiselect component, but I'm having some issues. So, what's happening it's that the filtering it's not working properly and I think the issue comes beacuse it's not getting the right currentFilter state. When I open the filter button it seems to do the filtering ok, but when I reopen the button, the filters selected previosly don't appear in the ui, despite the filtering persisting and I'm not able to unselect any filter at all, and if i try to filter again selecting new values it will just add the values to the currentFilter and perfoms the filtering adding the new values, plus the ones before. 


custom-component.ts

export class CustomMultiSelectFilterComponent implements AfterViewInit {

  @Output() public handleFilterChange = new EventEmitter<CompositeFilterDescriptor>()

  @Input() public data: string[] = []
  @Input() public textField: string = ""
  @Input() public valueField: string = ""
  @Input() public filter: CompositeFilterDescriptor = { logic: "or", filters: [] }
  @Input() public preFilterValue: string | null = null
  @Input() public filterService: FilterService
  @Input() public currentFilter: CompositeFilterDescriptor = { logic: "or", filters: [] }

  public constructor(
    filterService: FilterService
  ) {
    this.filterService = filterService
  }

  public filterChange(filter: CompositeFilterDescriptor): void {
    this.filter = filter
    this.data = filterBy(this.data , filter)
    this.handleFilterChange.emit(filter)
  }

  public onChange(values: string[], filterService: FilterService): void {
    filterService.filter({
      filters: values.map((value) => ({
        field: this.valueField,
        operator: "contains",
        value,
      })),
      logic: "or",
    })
  }

  public ngAfterViewInit(): void {
    if (this.filterService) {
      this.filterService.changes.subscribe((filter: CompositeFilterDescriptor) => {
        this.currentFilter = filter
        console.log("Current Filters:", this.currentFilter)
      })
    }
  }

}

custom-filter.html

<kendo-multiselect
  [data]="data"  
  [valuePrimitive]="true"
  [textField]="textField"
  [valueField]="valueField"
  [value]="filter | filterValues"
  (valueChange)="onChange($event, filterService)"
  >
</kendo-multiselect>

table.html

<kendo-grid
  kendoGridSelectBy="id"
  [kendoGridBinding]="users"
  filterable="menu"
  [sortable]="true"
  [resizable]="true"
  (selectionChange)="selectionChange($event)"
  [selectable]="selectableSettings"
  [selectedKeys]="[selectedKeyArray]"
  (filterChange)="handleFilterChange($event)"
  [filter]="filter"
>
  <kendo-grid-column-group title="{{ 'literal:Users | Total:' | translate }} {{ users.length }}" [columnMenu]="true">
    <kendo-grid-column field="roles" title="{{ 'literal:Roles' | translate }}" [width]="220" [headerStyle]="{ 'font-weight': 'bold' }">
      <ng-template kendoGridFilterMenuTemplate let-filter="filter" let-filterService="filterService">
        <app-custom-multiselect-filter
          [data]="rolesToFilter"
          textField="rolesToFilter"
          valueField="filterRoles"
          [preFilterValue]="preFilter"
          [filterService]="filterService"
          [currentFilter]="filter"
          >
        </app-custom

[Yanmario]

Hi Rebeca,

Thank you for the provided code snippets.

Looking at the code, you are on the right path and in your specific configuration your custom component should also extend BaseFilterCellComponent as documented in the following article:

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/filter-menu/#toc-custom-filter-menu-components

Updated example from our custom MultiSelect filter article:

https://stackblitz.com/edit/angular-g4jdmj-1xh4qm?file=src%2Fapp%2Fdropdownlist-filter.component.ts

I hope this helps.

Regards,
Yanmario
Progress Telerik