I have an array of ColumnDefinition objects which I am using to populate kendo-grid-columns.
Some columns have a custom row filter, using ng-template and kendoGridFilterCellTemplate.
My users have the ability to change their grid layout, in which case the ColumnDefinitions are updated, re-rendering the kendo-grid-columns. If this happens, any filters in the custom template are lost.
It appears that the 'let-filter' in the ng-template isn't re-binding to the existing column's filter. Is there a way to force this to rebind?
<ng-container *ngFor="let column of columnDefinitions">
<kendo-grid-column
*ngIf="column.isReadOnly"
field="{{ column.systemName }}"
title="{{ column.displayName }}"
format="{{ column.format }}"
[filter]="column.type"
[width]="column.width"
[hidden]="column.isHidden"
>
<ng-template
kendoGridFilterCellTemplate
let-filter
*ngIf="column.hasFilterList"
>
<app-multi-select-filter-component
[data]="getColumnFilterListValues(column.systemName)"
[filter]="filter"
[columnName]="column.systemName"
></app-multi-select-filter-component>
</ng-template>
</kendo-grid-column>
The column menu filter retains the previously selected value as seen in the attached screenshots.
Before the columns are updated
I have tried to loop through the grid columns after the columns are reloaded, but they're an array of ColumnBase objects so there's no way to access the filter object on them.