angular2 ag-grid-ng2 how to embed (default/custom) filter input in header cell

Question

I trying to create custom header cells for my grid and would like to embed input type for filtering right into the header cell instead of clicking the menu button. Is it possible to move filter and other fields from under menu section into the header cell?

Alexander F Alexander F · Accepted Answer · 2017-02-20T11:45:26

The issue is solved. Actually, with the latest update of the ag-grid to the version 8 as well as the update of the ag-grid-ng2 modules, it is possible to specify the header cells via the custom components. Any custom filters can be created as components either and attached to the needed columnDef. More details can surely be found in the ag-grid docs that were specifically updated for different frameworks (angular2 ag-grid docs). To solve the problem I created a factory for different column types and filter types as follows:

colDef = {
...
filterFramework: PartialFilterComponent as {new(): PartialFilterComponent},
headerComponentFramework: HeaderCellComponent as {new(): HeaderCellComponent},
headerComponentParams: {
    anyCustomParams: this.customParams
},
cellRendererFramework: CellRendererComponent as {new(): CellRendererComponent},
...
};

Please note that you have to register the injected components in the module declarations and AgGridModule.withComponents([]) import. Further on, the filter component will be available the header component as follows:

public agInit(params: ISmartHeaderParams): void {
        this.params = params;
        this.colDef = this.params.column.getColDef();
        let field = this.params.column.getColId();
        let agGridFilter = this.gridOptions.api.getFilterInstance(field);
        this.filterInstance = agGridFilter.getFrameworkComponentInstance();
    }

Adding input field to header component:

 <input #input (ngModelChange)="onChange($event)" [ngModel]="text">

And then calling the filterInstance method to search as follows:

public onChange(newValue: any): void {
        if (this.text!== newValue) {
            this.text= newValue;
            this.filterInstance.onChange(newValue);
        }
    }

The columns data gets filtered as it should per every column. You can apply any filter method or create any custom header component now. I guess at the moment these parts are well documented and have good examples.

angular2 ag-grid-ng2 how to embed (default/custom) filter input in header cell

1 Answers