Open Source

Blazor Grid Lite フィルター操作

Grid Lite は、データソースでのフィルター操作をサポートします。データフィルタリングは列ごとに制御されるため、フィルタリング可能な列とフィルタリング不可能な列を設定できます。デフォルトでは、列の Filterable プロパティで明示的に構成されない限り、列のフィルタリングは無効になっています。

<IgbGridLite Data="@data">
    <IgbGridLiteColumn Field="LastName" Filterable="true" />
</IgbGridLite>

FilteringCaseSensitive パラメーターを使用して、文字列列のフィルター操作で大文字と小文字を区別するかどうかを制御することもできます:

<IgbGridLiteColumn 
    Field="FirstName" 
    Filterable="true"
    FilteringCaseSensitive="true" />

フィルターモデル

グリッド内のフィルター操作の構成要素は、次の構造を持つ IgbGridLiteFilterExpression です。

public class IgbGridLiteFilterExpression
{
    /// <summary>
    /// フィルター操作の対象となる列です。
    /// </summary>
    [JsonPropertyName("key")]
    public string Key { get; set; }

    /// <summary>
    /// 適用するフィルター条件です。条件名 (string) または FilterOperation を指定できます。
    /// </summary>
    [JsonPropertyName("condition")]
    public object Condition { get; set; }

    /// <summary>
    /// フィルター条件関数で使用されるフィルター値です。
    /// 単項条件の場合はオプションです。
    /// </summary>
    [JsonPropertyName("searchTerm")]
    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
    public object SearchTerm { get; set; }

    /// <summary>
    /// この式がフィルター操作でどのように解決されるべきかを指定します。
    /// 'and' - レコードはすべての条件を満たす必要があります。
    /// 'or' - レコードは少なくとも 1 つの条件を満たす必要があります。
    /// </summary>
    [JsonPropertyName("criteria")]
    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
    public string Criteria { get; set; } // "and" または "or"

    /// <summary>
    /// フィルター操作で大文字と小文字を区別するかどうかを指定します。
    /// 指定されていない場合、値は列のフィルター構成に基づいて解決されます。
    /// </summary>
    [JsonPropertyName("caseSensitive")]
    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
    public bool? CaseSensitive { get; set; }
}

フィルター API

Grid Lite は、API からフィルター操作を適用する 2 つの方法を提供します。GridLite.Filter()/GridLite.ClearFilter() メソッドまたは GridLite.FilterExpressions プロパティのいずれかを使用します。

Filter() メソッドは、単一の式またはフィルター式の配列を受け入れ、それらの式に基づいてグリッドデータをフィルターします。

// 単一
await grid.Filter(new IgbGridLiteFilterExpression { Key = "FirstName", Condition = "contains", SearchTerm = "George" });

// 複数
await grid.Filter(new IgbGridLiteFilterExpression[]
{
    new IgbGridLiteFilterExpression { Key = "FirstName", Condition = "startsWith", SearchTerm = "a" },
    new IgbGridLiteFilterExpression { Key = "FirstName", Condition = "startsWith", SearchTerm = "g", Criteria = "or" }
});

ClearFilter() メソッドは、その名前が示すように、渡された引数に応じて、単一の列またはグリッドコンポーネント全体のフィルター状態をクリアします。

// `Age` 列のフィルター状態をクリアします。
grid.ClearFilter("Age");

// グリッドのフィルター状態をクリアします。
grid.ClearFilter();

初期のフィルター状態

FilterExpressions プロパティの動作は、Filter() メソッド呼び出しと非常に似ています。これはグリッド内のフィルター状態を制御する宣言的な方法を公開していますが、最も便利なのは、Grid Lite コンポーネントが最初にレンダリングされるときに初期フィルター状態を設定できることです。

例:

private IgbGridLiteFilterExpression[] filterState = new[]
{
    new IgbGridLiteFilterExpression { Key = "Age", Condition = "greaterThan", SearchTerm = 21 },
    // 単項条件のため `SearchTerm` は不要です。
    new IgbGridLiteFilterExpression { Key = "Active", Condition = "true" }
};

<IgbGridLite FilterExpressions="filterState" />

このプロパティを使用してコンポーネントの現在のフィルター状態を取得し、アプリケーション内の別の状態に応じて追加の処理を行うこともできます。

var state = grid.FilterExpressions;
// 現在のフィルター状態を保存します。
SaveUserFilterState(state);

イベント

UI を通じてフィルター操作が実行されると、コンポーネントは Filtering および Filtered イベントを発生させます。Filtering イベントはキャンセル可能で、キャンセルすると現在のフィルター操作が停止します。

グリッドが新しいフィルター状態を適用すると、Filtered イベントが発生します。対象列のフィルター状態を含み、このイベントはキャンセルできません。

<IgbGridLite Filtering="OnFiltering" Filtered="OnFiltered" />

@code {
    private void OnFiltering(IgbGridLiteFilteringEventArgs args)
    {
        // filtering イベントを処理します
    }

    private void OnFiltered(IgbGridLiteFilteredEventArgs args)
    {
        // filtered イベントを処理します
    }
}

API リファレンス

IgbGridLite<TItem>
IgbGridLiteColumn
IgbGridLiteFilterExpression

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

Grid Lite GitHub