Grid : Custom Filter not retaining the filter information when using non-primitive filters

[Ryan]

I am attempting to implement a custom filter for the Grid using the example found here: 

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

I have taken this example and removed some of the unnecessary items. Here's a link to the example which works:

WORKING: https://stackblitz.com/edit/angular-xldwansq?file=src%2Fapp%2Fapp.component.ts

This creates a custom filter component that is a multi-checkbox filter. It correctly filters the products. I can see when selecting that the local `filter` variable is updates as I select options, and when I click "Filter" it's applied to the grid and I can see the grid's filter at the top. When I open the filter menu again, I can still see the product filters that I originally applied selected.

However, or my purposes, I do not wish to filter on the name itself, but rather on the ID. Since I'm selecting from a finite list with IDs, this will be more performant when getting data from the database. 

To accomplish this, I set the component to use the products list directly, and tie in the textField and valueField. I then set the isPrimitive to false. Here is a link to the example:

NOT WORKING https://stackblitz.com/edit/angular-i3fyq6hp-n9nbqzrz?file=src%2Fapp%2Fapp.component.ts

The filter does indeed work, however when opening the filter menu again, it does NOT retain the previous set filters. Setting another set of filters appends the new set with the old set with AND logic. Clearing also doesn't seem to work.

Looking for any help or direction here. Thanks!

[Yanmario]

Hi Rayan,

The main issue is that the filter is applied to the ProductID field, which does not affect the state of the ProductName field. This happens because each column has its own filter state to represent its values. You can see this when changing the ProductName filter, which targets the ProductID field instead. In this case, the state is transferred to the ProductID column, which is confusing because filtering is generally meant to apply to each column individually.

Because of how this works, the simplest workaround is for both columns to share the same field. For the product name, you can use a cell template to display the product name instead of the ID.

Updated example - https://stackblitz.com/edit/angular-i3fyq6hp-zrhthvlf

Main changes:

      <kendo-grid-column field="ProductID" title="Product Name">
        <ng-template
          kendoGridFilterMenuTemplate
          let-column="column"
          let-filter="filter"
          let-filterService="filterService"
        >
          <pre>{{filter|json}}</pre>

          <multicheck-filter
            [isPrimitive]="false"
            [field]="'ProductID'"
            [filterService]="filterService"
            [currentFilter]="filter"
            [data]="products"
            [textField]="'ProductName'"
            [valueField]="'ProductID'"
          ></multicheck-filter>
        </ng-template>
        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
        {{ dataItem.ProductName }}
        </ng-template>
      </kendo-grid-column>

I hope this helps.

Regards,
Yanmario
Progress Telerik