I'm writing a custom control, which wraps a kendo grid using some code similar to this one:
<imx-grid [dataSource]="data">
<kendo-grid-column field="fieldName">
<ng-template kendoGridHeaderTemplate let-column>
<imx_stringFilter [test]="column" style="display:inline-block;" textField="fieldName" valueField="field">
</imx_stringFilter>
</ng-template>
<ng-template kendoGridFilterCellTemplate let-filter>
</ng-template>
</kendo-grid-column>
</imx-grid>
The component "imx-grid" handles the kendo-grid-columns via:
const resolvedPromise = Promise.resolve(null);
export class imx_QBM_GridComponent {
...
@Input() dataSource: any[];
@ContentChildren(ColumnComponent) columns: ColumnComponent;
@ViewChild(GridComponent) grid :GridComponent;
ngAfterContentInit() {
resolvedPromise.then(() => {
if (this.columns && this.columns.length > 0)
{
this.grid.columns.reset(this.columns.toArray());
}
});
}
...
}
The component "imx_stringFilter" is build like here, but it doesn't work properly. If I use in on the kendo grid itself without wrapping the grid, the filter is applied. And if I doesn't use my filter control, but the default filter control, it is applied as well.
After some research and debugging I could narrow it down to a problem with the FilterServices class, which is injected into the filter control.
If I use my filter control on the kendo-grid, the property "FilterService.observers" contains an item and in my case it does not. Unfortunately I have no idea, how to get the right FilterService instance into my component or how to fix this otherwise.
I hope someone could help me with this issue, because I invested too much time in trying to fix it myself.