Blazor Tree Grid ソート

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

Blazor Tree Grid ソート概要の例

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

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

ソート インジケーター

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

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

API でのソート

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

@code {
    this.grtreeGridid.SortAsync(new IgbSortingExpression[]
        {
            new IgbSortingExpression
            {
                FieldName = "Category",
                Dir = SortingDirection.Asc
            },
            new IgbSortingExpression
            {
                FieldName = "Price",
                Dir = SortingDirection.Desc
            }
        });
}

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

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

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

初期のソート状態

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

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

リモート ソート

IgbTreeGrid はリモート仮想化をサポートします。詳細については、Tree Grid リモート データ操作で説明されています。

• IgbTreeGrid.SortHeaderIconTemplate – re-templates the sorting icon when no sorting is applied.

<IgbTreeGrid SortHeaderIconTemplate="SortDefaultTemplate"></IgbTreeGrid>

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

• IgbTreeGrid.SortAscendingHeaderIconTemplate – re-templates the sorting icon when the column is sorted in ascending order.

<IgbTreeGrid SortAscendingHeaderIconTemplate="SortAscendingTemplate"></IgbTreeGrid>

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

• IgbTreeGrid.SortDescendingHeaderIconTemplate – re-templates the sorting icon when the column is sorted in descending order.

<IgbTreeGrid SortDescendingHeaderIconTemplate="SortDescendingTemplate"></IgbTreeGrid>

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

スタイル設定

ソート動作のスタイル設定は、すべてのテーマ関数とコンポーネント mixins が存在する index ファイルをインポートする必要があります。

<IgbTreeGrid class="grid">
</IgbTreeGrid>

最も簡単な方法は、grid-theme を拡張する新しいテーマを作成し、$sorted-header-icon-color、および sortable-header-icon-hover-color パラメーターを受け取る方法です。

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

スタイル設定

API リファレンス

Our community is active and always welcoming to new ideas.

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