Using Kendo grid filter on Columns inside ContentChildren in Angular 4

Viewed 718

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.

1 Answers

I found a workaround for myself. If there are better options feel free to add an answer to my question.

As for my solution: I wrapped the GridColumn as well and passed the FilterService I got using @ViewChild('grid', { read: FilterService }) _filterService;from the grid component to the wrapped grid column and then further down to my own filter control.

Not the best solution, but the only one I came up with so far and it worked the way I needed it to.

Related