Custom multi select filter

[esp]

I have created a custom multi select filter. The bottom items cannot be selected. To reproduce in the stackblitz below:

1. open product id filter
2. click into multi select
3. scroll down and select bottom item

The item is not selected. However if you select the top item first, and then scroll to the bottom and select it, it works.

At first I thought it was because the popup menu was closing, but I added the code to prevent it closing when the multi select popup has been clicked, which prevents the close but no event occurs for the item selection.

Here's a stackblitz demonstrating the issue:

https://stackblitz.com/edit/angular-mnxcmn

Any idea if I can resolve this on my end?

 

Thanks.

[Martin]

Hello,

Thank you for preparing this example for us.

When the custom column menu is opened and MultiSelect field is clicked, the accountTypeFilters handler is invoked.

I checked the demo and noticed that the accountTypeFilters doesn't splice a local array of items:

public selectedItems = [];

  // accountTypeFilters(): any[] {
  //   return this.flatten(this.filter).map(({ value }) => value);
  // }

  public accountTypeFilters() {
    this.selectedItems.splice(
      0,
      this.selectedItems.length,
      ...this.flatten(this.filter).map(({ value }) => value)
    );
    return this.selectedItems;
  }

Looking at this article for Customizing Filter Menus, the MultiSelect data should be spliced:

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/built-in-template/#toc-customizing-filter-menus

Here is the updated example:

https://stackblitz.com/edit/angular-mnxcmn-6bz4ft

I hope this helps.

Regards,
Martin
Progress Telerik

[esp]

Got it, thank you for that.