Blazor Grid フィルタリング

Blazor Grid の Ignite UI for Blazor フィルタリングは、特定の基準または条件に基づいてデータを選択的に表示または非表示にする機能です。IgbGrid コンポーネントが豊富なフィルタリング API とすべてのフィルタリング機能を提供するバインドされたデータ コンテナがあります。ここで利用可能なフィルタリング タイプは次の 3 つです。

• クイック フィルタリング
• Excel スタイル フィルタリング
• 高度なフィルタリング

Blazor Grid フィルタリングの例

以下のサンプルは、IgbGrid の Excel スタイル フィルタリング ユーザー エクスペリエンスを示しています。

設定

フィルタリングが有効かどうか、およびどのフィルタリング モードを使用するかを指定するために、IgbGrid は次のブール プロパティを公開します - AllowFiltering、AllowAdvancedFiltering、FilterMode と Filterable。

以下のオプションは、プロパティ AllowFiltering で指定できます。

• false - 対応するグリッドのフィルタリングが無効になります。これがデフォルト値です。
• true - 対応するグリッドのフィルタリングが有効になります。

以下のオプションは、プロパティ AllowAdvancedFiltering で指定できます。

• false - 対応するグリッドの高度なフィルタリングが無効になります。これがデフォルト値です。
• true - 対応するグリッドの高度なフィルタリングが有効になります。

以下のオプションは、プロパティ FilterMode で指定できます。

• QuickFilter - 簡易なフィルタリング UI。これがデフォルト値です。
• ExcelStyleFilter - Excel のようなフィルタリング UI。

以下のオプションは、プロパティ Filterable で指定できます。

• true - 対応する列のフィルタリングが有効になります。これがデフォルト値です。
• false - 対応する列のフィルタリングが無効になります。

<IgbGrid Data=data AutoGenerate=false AllowFiltering=true>
    <IgbColumn Field="ProductName" DataType="GridColumnDataType.String"></IgbColumn>
    <IgbColumn Field="Price" DataType="GridColumnDataType.Number" Filterable=false></IgbColumn>
</IgbGrid>

高度なフィルタリング を有効にするには、AllowAdvancedFiltering 入力プロパティを true に設定します。

<IgbGrid Data=data AutoGenerate=true AllowAdvancedFiltering=true />

インタラクション

特定の列のフィルター行を開くには、ヘッダー下のフィルター チップをクリックします。状態を追加するために入力の左側のドロップダウンを使用してフィルター オペランドを選択し、値を入力します。number と date 列には、Equals がデフォルトで選択されます。string には ‘Contains’、boolean には ‘All’ が選択されます。‘Enter’ を押して条件を確定して他の条件を追加できます。条件チップの間にドロップダウンがあり、それらの間の論理演算子を決定します。‘AND’ がデフォルトで選択されます。条件の削除はチップの X ボタンをクリックします。編集はチップを選択、入力はチップのデータで生成されます。フィルター行が開いているときにフィルター可能な列のヘッダーをクリックして選択し、フィルター条件を追加できます。

列に適用したフィルターがある場合、フィルター行が閉じられるとチップの閉じるボタンをクリックした条件の削除やいずれかのチップを選択してフィルター行を開くことができます。すべての条件を表示するための十分なスペースがない場合、条件数を示すバッジ付きのフィルター アイコンが表示されます。フィルター行を開くためにクリックできます。

使用方法

デフォルトの定義済みフィルタリングおよび標準のフィルタリング条件があり、カスタム実装で置き換えることも可能です。また、カスタム フィルタリング条件を追加することもできます。IgbGrid には、簡易なフィルター UI と詳細なフィルター オプションがあります。列で設定された DataType に基づいて、適切なフィルタリング処理のセットがフィルター UI ドロップダウンに読み込まれます。また、IgnoreCase と最初の Condition プロパティを設定できます。

フィルタリング機能は、AllowFiltering 入力を true に設定すると IgbGrid コンポーネントで有効になります。デフォルトの FilterMode は QuickFilter でランタイムでは変更できません。特定の列でこの機能を無効にするには、Filterable 入力を false に設定します。

<IgbGrid [data]="data" [autoGenerate]="false" [allowFiltering]="true">
    <igx-column field="ProductName" dataType="string"></igx-column>
    <igx-column field="Price" dataType="number"></igx-column>
    <igx-column field="Discontinued" [dataType]="'boolean'" [filterable]="false"></igx-column>
</IgbGrid>

初期のフィルター状態

IgbGrid の初期フィルタリング状態の設定は、IgbGrid IgbFilteringExpressionsTree プロパティを IgbFilteringExpressionsTree の配列に設定して各列をフィルターします。

<IgbGrid
    FilteringExpressionsTree="filteringExpressions"
    AllowFiltering="true"
    FilterMode="FilterMode.QuickFilter">
</IgbGrid>

@code {

    protected override async Task OnInitializedAsync()
    {
        IgbFilteringExpressionsTree gridFilteringExpressionsTree = new IgbFilteringExpressionsTree() { Operator = FilteringLogic.And };

        IgbFilteringExpression categoryFilteringExpressionsTree = new IgbFilteringExpression()
            {
            FieldName = "Category",
            ConditionName = "contains",
            IgnoreCase = true,
            SearchVal = "Metals"
        };

        IgbFilteringExpression typeFilteringExpressionsTree = new IgbFilteringExpression()
        {
            FieldName = "Type",
            ConditionName = "contains",
            IgnoreCase = true,
            SearchVal = "e"
        };

        gridFilteringExpressionsTree.FilteringOperands = new IgbFilteringExpression[2] { categoryFilteringExpressionsTree, typeFilteringExpressionsTree };

        filteringExpressions = gridFilteringExpressionsTree;
    }

    public IgbFilteringExpressionsTree filteringExpressions;
}

フィルター ロジック

IgbGrid コントロールの FilteringLogic プロパティは IgbGrid で複数の列のフィルターが解決する方法を制御します。IgbGrid API または IgbGrid の入力プロパティによって変更できます。

 <IgbGrid FilteringLogic="FilteringLogic.Or"></IgbGrid>

AND のデフォルト値は現在適用されているすべてのフィルター式と一致する行のみを返します。上記の例は、「ProductName」 セル値が 「myproduct」 を含み、「Price」 セル値が 55 より大きい場合に行が返されます。

OR に設定される場合、「ProductName」 セル値が 「myproduct」 を含むか、「Price」 セル値が 55 より大きい場合に行が返されます。

フィルター セルの再テンプレート化

フィルター セルを再テンプレート化するために、FilterCellTemplate とマークされたテンプレートを追加することができます。以下のサンプルでは、​​文字列カラムへの入力と日付列に IgbDatePicker が追加されています。ユーザーが値を入力または選択すると、文字列カラムには contains 演算子、日付列には equals 演算子を使用したフィルターが、グリッドのパブリック API を使用して適用されます。

<IgbGrid Class="grid"></IgbGrid>

.grid {
    --ig-grid-filtering-row-text-color: #292826;
    --ig-grid-filtering-row-background: #ffcd0f;
    --ig-grid-filtering-header-text-color: #292826;
    --ig-grid-filtering-header-background: #ffcd0f;
}

マッチング レコードのみのフィルタリング方式

スキーマの使用

テーマ エンジンを使用してスキーマの利点を活用でき、堅牢で柔軟な構造を構築できます。スキーマはテーマを使用する方法です。

デモ

既知の問題と制限

Our community is active and always welcoming to new ideas.

• Ignite UI for Blazor Forums
• Ignite UI for Blazor GitHub