Blazor Tree Grid ソート

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

    Blazor Tree Grid ソート概要の例

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

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

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

    ソート インジケーター

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

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

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    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
                }
            });
    }
    razor

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

    フィルター動作と同様に、ソート状態をクリアするには 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("");
    }
    razor

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

    ソート操作で IgbTreeGrid の基になるデータ ソースは変更しません。

    初期のソート状態

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

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

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

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

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

    • SortHeaderIconTemplate – ソートが適用されない場合にソート アイコンを再テンプレート化します。
    <IgbTreeGrid SortHeaderIconTemplate="SortDefaultTemplate"></IgbTreeGrid>
    
    @code {
        public RenderFragment<IgbGridHeaderTemplateContext> SortDefaultTemplate = (ctx) =>
        {
            return @<IgbIcon Size="SizableComponentSize.Small" IconName="unfold_more" Collection="material"></IgbIcon>;
        };
    }
    razor
    <IgbTreeGrid SortAscendingHeaderIconTemplate="SortAscendingTemplate"></IgbTreeGrid>
    
    @code {
        public RenderFragment<IgbGridHeaderTemplateContext> SortAscendingTemplate = (ctx) =>
        {
            return @<IgbIcon Size="SizableComponentSize.Small" IconName="expand_less" Collection="material"></IgbIcon>;
        };
    }
    razor
    <IgbTreeGrid SortDescendingHeaderIconTemplate="SortDescendingTemplate"></IgbTreeGrid>
    
    @code {
        public RenderFragment<IgbGridHeaderTemplateContext> SortDescendingTemplate = (ctx) =>
        {
            return @<IgbIcon Size="SizableComponentSize.Small" IconName="expand_more" Collection="material"></IgbIcon>;
        };
    }
    razor

    スタイル設定

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

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

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

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

    デモ

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    API リファレンス

    その他のリソース

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