typescript - Använda Kendo grid-filter på kolumner inuti ContentChildren i Angular 4
Jag skriver en anpassad kontroll, som omsluter ett Kendo-grid med någon kod som liknar denna:
<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>
Komponenten "imx-grid" hanterar kendo-grid-kolumnerna 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());
}
});
}
...
}
Komponenten "imx_stringFilter" är byggd som här, men den fungerar inte korrekt. Om jag använder den direkt på Kendo-gridet utan att omsluta gridet, tillämpas filtret. Och om jag inte använder min filterkontroll, utan standardfilterkontrollen, tillämpas det också.
Efter lite forskning och felsökning kunde jag begränsa det till ett problem med FilterServices-klassen, som injiceras i filterkontrollen.
Om jag använder mitt filterkontroll på kendo-grid innehåller egenskapen "FilterService.observers" ett objekt och i mitt fall gör den det inte. Tyvärr har jag ingen aning om hur man får rätt FilterService-instans in i min komponent eller hur man annars kan fixa detta.
Jag hoppas att någon kan hjälpa mig med detta problem, eftersom jag har investerat för mycket tid på att försöka fixa det själv.
Svar #1
Jag hittade en lösning för mig själv. Om det finns bättre alternativ, tveka inte att lägga till ett svar på min fråga.
När det gäller min lösning: Jag omslöt GridColumn också och skickade FilterService som jag fick med @ViewChild('grid', { read: FilterService }) _filterService; från grid-komponenten till den omslutna gridkolumnen och vidare ned till min egen filterkontroll.
Inte den bästa lösningen, men den enda jag har kommit på hittills och den fungerade på det sätt jag behövde.