angular2 ag-grid-ng2ヘッダーセルにフィルタ入力を埋め込む方法（デフォルト/カスタム）

Question

グリッドのカスタムヘッダーセルを作成しようとしていますが、ヘッダーセルにフィルタリングの入力タイプを埋め込むのではなく、メニューボタン。フィルタやその他のフィールドを下のメニューセクションから見出しセルに移動することは可能ですか？

Answer 1

問題は解決しました。実際、ag-gridの最新のバージョン8とag-grid-ng2モジュールの更新で、カスタムコンポーネントを介してヘッダセルを指定することができます。任意のカスタムフィルタをコンポーネントとして作成し、必要なcolumnDefにアタッチすることができます。異なるフレームワーク（angular2 ag-grid docs）用に特に更新されたag-gridドキュメントで、より詳細な情報が確実に得られます。

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

あなたはモジュールの宣言とAgGridModule.withComponents（[]）の輸入に注入コンポーネントを登録する必要があることに注意してください：次のように は、問題を解決するために私は別の列の型とフィルタタイプのファクトリを作成しました。

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(); 
    } 

成分ヘッダに入力フィールドを追加する：以下のように検索するfilterInstanceメソッドを呼び出し、次に

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

および次のようにさらに上に、フィルタ要素は、ヘッダコンポーネント利用できるようになり

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

カラムのデータは、すべてのカラムごとにフィルタリングされます。フィルタメソッドを適用したり、カスタムヘッダーコンポーネントを作成したりすることができます。私は今、これらの部分は十分に文書化されており、良い例があると思います。