Ignite UI for Angular 11.1.6 バージョン時点での情報に基づいています。
IgxGrid では列の formatter 機能を利用することで、バインドデータに対してフォーマットを行うことができます。フォーマットを行った列に対してフィルタリングを行う場合、通常は、フォーマットされた値ではなくバインドデータに対してフィルタリングを適用します。しかし、状況によってはフォーマットされた値に対してフィルタリングを行いたいことがあります。このような状況においては、IgxGrid に FormattedValuesFilteringStrategy を連携することで対応することができます。
grid-formatted-filtering-strategy.component.html
<igx-grid igxPreventDocumentScroll #grid1 [data]="data"
[autoGenerate]="false" height="600px" width="100%"
[allowFiltering]="true" [filterMode]="'excelStyleFilter'"
[filterStrategy]="filterStrategy">
...
<igx-column field="UnitPrice" header="Unit Price Category" [sortable]="true" [disableHiding]="true" dataType="string" [formatter]="formatPrice">
</igx-column>
...
</igx-grid>
grid-formatted-filtering-strategy.component.ts
export class GridFormattedFilteringStrategyComponent implements OnInit {
...
public formatPrice(value: number) {
return value < 15 ? 'low' : value > 50 ? 'high' : 'medium';
}
}
なお、IgxHierarchicalGrid では IgxGrid と同様に FormattedValuesFilteringStrategy を、IgxTreeGrid では TreeGridFormattedValuesFilteringStrategy を利用することができます。
