ソート操作

Grid Lite はデータ ソースに対してソート操作をサポートします。ソートは列単位で制御され、ソート可能な列とソート不可の列を設定できます。グリッド自体も特定のソート動作を制御します。デフォルトでは、列の Sortable プロパティで明示的に設定されない限り、列のソートは無効です。

<IgbGridLite Data="@data">
    <IgbGridLiteColumn Field="Price" Sortable="true" />
</IgbGridLite>

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

<IgbGridLiteColumn 
    Field="Name" 
    Sortable="true"
    SortingCaseSensitive="true" />

単一および複数列ソート

Grid Lite は単一および複数列ソートの両方をサポートします。複数列ソートはデフォルトで有効で、グリッドの IgbSortingOptions プロパティを通じて設定可能です。Mode プロパティは、値として GridLiteSortingMode.Single または GridLiteSortingMode.Multiple を受け入れます。

// 単一列のソートを有効にします
grid.SortingOptions = new IgbGridLiteSortingOptions { Mode = GridLiteSortingMode.Single };

3 状態ソート

Grid Lite は 3 状態ソートをサポートしており、常に有効になっています。エンド ユーザーがソート可能な列ヘッダーをクリックすると、ソート方向が次の順序で切り替わります:

Ascending -> Descending -> None -> Ascending

None はデータの初期状態、つまりグリッドによるソートが適用されていない状態です。

ソート インジケーター

複数列ソートが有効な場合、列ヘッダーにはソート インジケーターが表示されます。これはソート操作が適用された順序を示す番号です。

次のサンプルは、グリッドの IgbSortingOptions プロパティと、それがグリッドのソート動作を制御する方法を示しています。

ソート モデル

Grid Lite におけるソート操作の基本単位は IgbGridLiteSortingExpression で、以下のプロパティを持ちます:

public class IgbGridLiteSortingExpression
{
    /// <summary>
    /// ターゲット列。
    /// </summary>
    [JsonPropertyName("key")]
    public string Key { get; set; }

    /// <summary>
    /// この操作のソート方向。
    /// </summary>
    [JsonPropertyName("direction")]
    public GridLiteSortingDirection Direction { get; set; }

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

グリッドはこれらの式をソート API メソッドや構成で使用するほか、エンド ユーザーがコンポーネントを操作したときには、イベントやソート状態のためにこれらの式を生成します。詳細は以下を参照してください。

ソート API

Grid Lite は、ソート操作を API から適用するために 2 つの方法を提供します。Sort()/ClearSort() メソッドを使用するか、SortingExpressions プロパティを使用します。

Sort() メソッドは、単一式または複数のソート式の配列を受け取り、それらに基づいてグリッド データをソートします。

// 単一
await grid.Sort(new IgbGridLiteSortingExpression { Key = "Price", Direction = GridLiteSortingDirection.Descending });

// 複数
await grid.Sort(new IgbGridLiteSortingExpression[]
{
    new IgbGridLiteSortingExpression { Key = "Price", Direction = GridLiteSortingDirection.Descending },
    new IgbGridLiteSortingExpression { Key = "Name", Direction = GridLiteSortingDirection.Descending }
});

ClearSort() メソッドは、その名の通り、渡された引数に応じて、単一列またはグリッド コンポーネント全体のソート状態をクリアします。

// `Price` 列のソート状態をクリアします。
await grid.ClearSort("Price");

// グリッドのソート状態をクリアします。
await grid.ClearSort();

初期のソート状態

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

例:

private IgbGridLiteSortingExpression[] sortState = new[]
{
    new IgbGridLiteSortingExpression { Key = "Price", Direction = GridLiteSortingDirection.Descending },
    new IgbGridLiteSortingExpression { Key = "Name", Direction = GridLiteSortingDirection.Ascending, CaseSensitive = true }
};

<IgbGridLite SortingExpressions="sortState" />

これを使用すると、コンポーネントの現在のソート状態を取得し、アプリケーション内の別の状態に応じて追加の処理を実行できます。

var state = grid.SortingExpressions;
// 現在のソート状態を保存します
SaveUserSortState(state);

イベント

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

グリッドが新しいソート状態を適用した後、Sorted イベントが発生します。このイベントには最後のソート操作で使用された式が含まれ、キャンセルはできません。

<IgbGridLite Sorting="OnSorting" Sorted="OnSorted" />

@code {
    private void OnSorting(IgbGridLiteSortingEventArgs args)
    {
        // Sorting イベントを処理します
    }

    private void OnSorted(IgbGridLiteSortedEventArgs args)
    {
        // Sorted イベントを処理します
    }
}

次のサンプルでは、Name と Rating 列のソートを試みると操作がキャンセルされます。下記のイベント ログで動作を確認してください。

API リファレンス

その他のリソース

• 列の構成
• フィルタリング

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

• Grid Lite GitHub