Blazor グリッド フィルターの概要

    Ignite UI for Blazor Data Table / Data Grid には、フィルター行と API の両方を使用した列フィルタリングが含まれており、フィルター処理される列のデータ型に基づいてソート条件を実行できます。

    Blazor グリッド フィルターの例

    上記のように、FilterUIType プロパティを FilterRow に設定すると、ユーザー インターフェイスでレコードをフィルタリングできるようになり、ユーザーはレコードをフィルタリングするためのフィルター基準を指定できます。指定されたフィルター基準に一致しないレコードは非表示になります。

    フィールドにカーソルを合わせて垂直の省略記号をクリックすると、列オプション UI にもフィルタリングが表示されます。これは、FilterUIType を ColumnOptions に設定するときに実現されます。以下のサンプルを参照してください。

    フィルター式

    以下の例では、データ グリッドの FilterExpressions コレクションが更新され、カスタムの IgbFilterExpression が組み込まれています。

    フィルター演算子

    列には、filter-row オペランド ドロップダウンに表示されるカスタムの IgbFilterOperand を指定できます。重要な要件は、オペランドに DisplayName が指定されていることを確認し、オペランドで FilterRequested イベントを利用して、FilterFactory を適用できるようにすることです。これにより、列をフィルタリングする演算子と値を割り当てることができます。例えば、「A」の値で開始します。

    オペランドは列に適用されるため、インライン、コード内、または別のクラスに追加できます。各アプローチは、以下の例で示されています。