Blazor Grid ソート

Blazor Grid の Ignite UI for Blazor データソート機能は列ごとのレベルで有効になっています。つまり、IgbGrid にはソート可能な列とソート不可能な列を混在させることができます。Blazor でソートを実行すると、指定した条件に基づいてレコードの表示順序を変更できます。

Blazor Grid ソート概要の例

以下のように Sortable 入力を使用します。IgbGrid のソートで、SortingIgnoreCase プロパティを設定して大文字と小文字を区別するソートができます。

<IgbColumn Field="Title" Sortable="true"></IgbColumn>

ソートインジケーター

ソートされた列数が一定数以上ある場合、ソート順の指定がないと混乱する可能性があります。

IgbGrid は、ソートされた各列のインデックスを示すことにより、この問題の解決策を提供します。

API でのソート

IgbGrid Sort メソッドを使用し、列または複数の列を IgbGrid API でソートできます。

@code {
    this.grid.SortAsync(new IgbSortingExpression[]
        {
            new IgbSortingExpression
            {
                FieldName = "CompanyName",
                Dir = SortingDirection.Asc
            },
            new IgbSortingExpression
            {
                FieldName = "Country",
                Dir = SortingDirection.Asc
            }
        });
}

[!Note] Sorting は、DefaultSortingStrategy アルゴリズムを使用して実行されます。IgbColumn または ISortingExpression は、代替アルゴリズムとして ISortingStrategy のカスタム実装を使用できます。たとえば複雑なテンプレート列や画像列にユーザー定義のソートを定義する必要がある場合に便利です。

フィルター動作と同様に、ソート状態をクリアするには ClearSort メソッドを使用します。

@code {
    @*Removes the sorting state from the Title column*@
    this.grid.ClearSortAsync("Title");

    @*Removes the sorting state from every column in the Grid*@
    this.grid.ClearSortAsync("");
}

[!Note] IgbGrid の SortStrategy は IgbColumn の SortStrategy と比較して異なるタイプです。異なるスコープで機能し、異なるパラメーターを公開するためです。

[!Note] ソート操作で IgbGrid の基になるデータソースは変更しません。

初期のソート状態

IgbGrid でソート状態を初期設定するには、ソート式の配列を IgbGrid の SortingExpressions プロパティに渡します。

@code {
    protected override void OnAfterRender(bool first)
    {
        if (first)
        {
            this.grid.SortingExpressions = new IgbSortingExpression[]{
                new IgbSortingExpression()
                {
                    FieldName = "Title",
                    Dir = SortingDirection.Asc
                }};
        }
    }
}

[!Note] string 型の値が DataType Date の列で使用される場合、IgbGrid が値を Date オブジェクトに解析しないため IgbGrid Sorting が正しく動作しません。string オブジェクトを使用する場合、値を Date オブジェクトに解析するためのロジックをアプリケーションレベルで実装する必要があります。

ソートインジケーターテンプレート

列ヘッダーのソートインジケーターアイコンは、テンプレートを使用してカスタマイズできます。次のプロパティは、任意のソート状態 (昇順、降順、なし) のソートインジケーターをテンプレート化するために使用できます。

SortHeaderIconTemplate – ソートが適用されない場合にソートアイコンを再テンプレート化します。

<IgbGrid SortHeaderIconTemplate="SortDefaultTemplate"></IgbGrid>

@code {
    public RenderFragment<IgbGridHeaderTemplateContext> SortDefaultTemplate = (ctx) =>
    {
        return @<IgbIcon Size="SizableComponentSize.Small" IconName="unfold_more" Collection="material"></IgbIcon>;
    };
}

SortAscendingHeaderIconTemplate – 列が昇順にソートされたときにソートアイコンを再テンプレート化します。

<IgbGrid SortAscendingHeaderIconTemplate="SortAscendingTemplate"></IgbGrid>

@code {
    public RenderFragment<IgbGridHeaderTemplateContext> SortAscendingTemplate = (ctx) =>
    {
        return @<IgbIcon Size="SizableComponentSize.Small" IconName="expand_less" Collection="material"></IgbIcon>;
    };
}

SortDescendingHeaderIconTemplate – 列が降順にソートされたときにソートアイコンを再テンプレート化します。

<IgbGrid SortDescendingHeaderIconTemplate="SortDescendingTemplate"></IgbGrid>

@code {
    public RenderFragment<IgbGridHeaderTemplateContext> SortDescendingTemplate = (ctx) =>
    {
        return @<IgbIcon Size="SizableComponentSize.Small" IconName="expand_more" Collection="material"></IgbIcon>;
    };
}

スタイル設定

定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。

<IgbGrid class="grid">
</IgbGrid>

次に、そのクラスに関連する CSS プロパティを設定します。

.grid {
    --ig-grid-sorted-header-icon-color: #ffb06a;
    --ig-grid-sortable-header-icon-hover-color: black;
}

デモ

API リファレンス

IgbSortingExpression

その他のリソース

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

Blazor Grid ソート