multiselect grid filter incomplete binding

[Ron]

I've got a strange case with an in-grid dropdown filter that, for some reason, will bind to the first seven or eight of twenty-one objects in an array but will send back an empty array when sending back to vmUserFilters and vmUserChange as well as having the dropdown vanish when users after the eighth or ninth record are selected. One work-around is selecting a name in the first seven records and then adding a record between the ninth and twenty-first and removing the first added however I don't think our client will accept that arrangement. Below is the grid column and dropdown in question:

 

        <kendo-grid-column field="currentHolderId" title="Sales Person" width="100">
        <ng-template kendoGridFilterMenuTemplate
                     let-column="column"
                     let-filter="filter"
                     let-filterService="filterService">
          <kendo-multiselect [data]="vmusers"
                             textField="userName"
                             valueField="id"
                             [valuePrimitive]="true"
                             [value]="vmUserFilters(filter)"
                             (valueChange)="vmUserChange($event, filterService)">
          </kendo-multiselect>
        </ng-template>
        <ng-template kendoGridCellTemplate let-dataItem>
          {{vmuserFind(dataItem.currentHolderId)?.userName}}
        </ng-template>
      </kendo-grid-column>

 

Some additional information from my code:

The functions referenced above:

  public vmUserFilters(filter: CompositeFilterDescriptor): FilterDescriptor[] {
    return flatten(filter).map(({ value }) => value);
  }

  public vmUserChange(values: any[], filterService: FilterService): void {
    filterService.filter({
      filters: values.map(value => ({
        field: 'currentHolderId',
        operator: 'eq',
        value
      })),
      logic: 'or'
    });
  }

 

The interface for the vmusers array:

export interface IVMUser {
  id: string
  userName: string
  role: string
}

 

Let me know if you can think of anything that could be causing this issue behind the scenes or what I might need to add/update. I can verify that these values are consistent - ie. id is a unique identifier, userName is a first and last name, role is a single-word string.

 

Thank you!

 

[Dimiter Topalov]

Hello Ron,

The described behavior is really strange. The setup seems to be taken directly from our online demo:

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

Can you please make sure that you are using the latest versions of our packages, and a RxJS version, different than 6.3.x:

https://github.com/telerik/kendo-angular/issues/1962

Also, check for some discrepancies in the related methods that cannot be observed in the pasted code snippets (for example the method, responsible for calculating the value of the MultiSelect component, based on the current filter), e.g.:

public categoryFilters(filter: CompositeFilterDescriptor): FilterDescriptor[] {
        this.categoryFilter.splice(
            0, this.categoryFilter.length,
            ...flatten(filter).map(({ value }) => value)
          );
        return this.categoryFilter;
    }

Also make sure that the MultiSelect's data contains all objects it is supposed to, and all items that are to be a part of the component's value are also present in the data collection the MultiSelect is data-bound to via the "data" property.

Last thing to check that comes to mind, is whether the Grid filter option is properly bound to a class field that is properly updated in the filterChange/dataStateChange event handler:

<kendo-grid
                [data]="gridData"
                [filter]="filter"
...

public filter: CompositeFilterDescriptor;
public filterChange(filter: CompositeFilterDescriptor): void {
        this.filter = filter;
        this.gridData = filterBy(sampleProducts, filter);
    }

Also the Grid data items should have "currentHolderId" property that is a string and matches the MultiSelect's data items' "id" property.

If the issue still persists, we will need a similar isolated runnable project where it can be observed, so we can inspect it further, and determine what might be causing the problem. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Ron]

Dimiter, 

I was able to try this out in the past week or so and I did find that the composite filter was the issue. I used the example you gave above as well as the declaration that was shown in the tutorial:

private categoryFilter: any[] = [];

That seemed to resolved the issue. I may have tried too much of a direct plug-and-play from another setup and I'll need to keep in mind that the rule sets change significantly across filter display schemes.