概要
Ignite UI for Angular の IgxGrid では、Excel Style Filter メニューの表示内容をテンプレート機能で細かくカスタマイズできます。
Excel Style Filter メニューは「カラム操作エリア」と「フィルター操作エリア」の 2 つに分かれており、それぞれ専用のディレクティブで再テンプレート化できます。ソートボタンや詳細フィルターなど、任意のコンポーネントを表示・非表示にすることが可能です。
対象コントロール
- Infragistics Ignite UI for Angular — IgxGrid（Excel Style Filter）
問題
Excel Style Filter メニューに表示される各機能（ソート・ピン・非表示・詳細フィルターなど）の一部だけを非表示にしたい場合、カラム属性（disablePinning / disableHiding / sortable）では制御できる範囲に限りがあります。特に詳細フィルター（igx-excel-style-conditional-filter）には対応するプロパティがありません。
解説
Excel Style Filter メニューは以下の 2 つのエリアに分かれており、それぞれ専用のディレクティブで再テンプレート化できます。
| エリア | タグ | ディレクティブ | デフォルトの内容 |
|---|---|---|---|
| カラム操作エリア（上） | igx-excel-style-column-operations | IgxExcelStyleColumnOperationsTemplateDirective | ソート・ピン・非表示ボタン |
| フィルター操作エリア（下） | igx-excel-style-filter-operations | IgxExcelStyleFilterOperationsTemplateDirective | 検索リスト・詳細フィルター |
テンプレート内に含めたコンポーネントだけが表示されます。不要なコンポーネントを記述しないことで、任意の要素を非表示にできます。
使用できるコンポーネント
igx-excel-style-column-operations（カラム操作エリア）および igx-excel-style-filter-operations（フィルター操作エリア）の中に、以下のコンポーネントを必要なものだけ記述します。記述したコンポーネントのみが表示されます。
| コンポーネント | エリア | 内容 |
|---|---|---|
| igx-excel-style-header | カラム操作 | ピン固定・非表示ボタン。showPinning / showHiding 属性で個別に表示・非表示を制御できます。 |
| igx-excel-style-sorting | カラム操作 | 昇順・降順のソートボタン。 |
| igx-excel-style-search | フィルター操作 | 検索ボックスとチェックボックスリスト（値の絞り込み）。 |
| igx-excel-style-conditional-filter | フィルター操作 | 詳細フィルター（条件式を入力するダイアログを開くボタン）。このコンポーネントを省くことで非表示にできます。 |
サンプルコード
詳細フィルター（igx-excel-style-conditional-filter）を非表示にする場合は、igx-excel-style-filter-operations 内に igx-excel-style-search のみを記述し、igx-excel-style-conditional-filter を省略します。
<igx-grid [data]="data" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
<igx-grid-excel-style-filtering>
<igx-excel-style-column-operations>
<igx-excel-style-header
[showPinning]="true"
[showHiding]="true">
</igx-excel-style-header>
<igx-excel-style-sorting></igx-excel-style-sorting>
</igx-excel-style-column-operations>
<igx-excel-style-filter-operations>
<igx-excel-style-search></igx-excel-style-search>
<!-- igx-excel-style-conditional-filter を書かない → 非表示 -->
</igx-excel-style-filter-operations>
</igx-grid-excel-style-filtering>
</igx-grid>
まとめ
- Excel Style Filter メニューはカラム操作エリアとフィルター操作エリアの 2 つに分かれており、それぞれ専用のディレクティブで再テンプレート化できます。
- テンプレート内に含めたコンポーネントだけが表示されるため、不要なコンポーネントを省くことで任意の要素を非表示にできます。
- igx-excel-style-header の showPinning / showHiding 属性を使うと、ピン・非表示ボタンを個別に制御することも可能です。
参考ドキュメント
