[!Note] このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。
Web Components グリッド フィルターの概要
Ignite UI for Web Components Data Table / Data Grid には、フィルター行と API の両方を使用した列フィルタリングが含まれており、フィルター処理される列のデータ型に基づいてソート条件を実行できます。
Web Components グリッド フィルターの例
上記のように、filterUIType
プロパティを FilterRow に設定すると、ユーザー インターフェイスでレコードをフィルタリングできるようになり、ユーザーはレコードをフィルタリングするためのフィルター基準を指定できます。指定されたフィルター基準に一致しないレコードは非表示になります。
フィールドにカーソルを合わせて垂直の省略記号をクリックすると、列オプション UI にもフィルタリングが表示されます。これは、filterUIType
を ColumnOptions に設定するときに実現されます。以下のサンプルを参照してください。
フィルター式
以下の例では、データ グリッドの FilterExpressions コレクションが更新され、カスタムの filterExpressions
が組み込まれています。
フィルター演算子
列には、filter-row オペランド ドロップダウンに表示されるカスタムの IgcFilterOperand
を指定できます。重要な要件は、オペランドに displayName
が指定されていることを確認し、オペランドで FilterRequested
イベントを利用して、filterFactory
を適用できるようにすることです。これにより、列をフィルタリングする演算子と値を割り当てることができます。例えば、「A」の値で開始します。
さらに、グリッドの filterLogicalOperator
プロパティは、フィールド間のフィルターがどのように組み合わされるかを示す役割を果たします。
And
論理演算子。正しく一致させるためには、すべての条件をパスする必要があります。Or
論理演算子。正しく一致させるためには、少なくとも 1 つの条件をパスする必要があります。