Angular Tree Grid のソート

Ignite UI for Angular Tree Grid では、列レベルでのデータ ソートが可能です。つまり、igx-tree-grid にソート可能な列とソート不可の列の両方を持つことができます。Angular でソートを実行すると、指定した条件に基づいてレコードの表示順序を変更できます。

注: これまで、グループ化 / ソートは互いに連携して機能していました。13.2 バージョンでは、グループ化をソートから切り離す新しい動作が導入されています。たとえば、グループ化をクリアしても、グリッド内のソート式はクリアされません。その逆も同様です。それでも、列がソートおよびグループ化されている場合は、グループ化された式が優先されます。

Angular Tree Grid ソートの例

更に igx-tree-grid の contextMenu 出力を使用してソートにカスタム contextmenu が追加されます。

sortable 入力で可能です。Tree Grid のソートで、sortingIgnoreCase プロパティを設定して大文字と小文字を区別するソートができます。

<igx-column field="Name" header="Order Product" [dataType]="'string'" sortable="true"></igx-column>

ソート インジケーター

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

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

API を使用したソート

Tree Grid sort メソッドを使用して列、複数の列の組み合わせをソートできます。

import { SortingDirection } from 'igniteui-angular';
// import { SortingDirection } from '@infragistics/igniteui-angular'; for licensed package

// Perform a case insensitive ascending sort on the ProductName column.
this.treeGrid.sort({ fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true });

// Perform sorting on both the ProductName and Price columns.
this.treeGrid.sort([
    { fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true },
    { fieldName: 'UnitPrice', dir: SortingDirection.Desc }
]);

Note

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

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

// Removes the sorting state from the ProductName column
this.treeGrid.clearSort('Name');

// Removes the sorting state from every column in the Tree Grid
this.treeGrid.clearSort();

Note

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

Note

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

初期のソート状態

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

Note

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

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

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

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

<ng-template igxSortHeaderIcon>
    <igx-icon>unfold_more</igx-icon>
</ng-template>

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

<ng-template igxSortAscendingHeaderIcon>
    <igx-icon>expand_less</igx-icon>
</ng-template>

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

<ng-template igxSortDescendingHeaderIcon>
    <igx-icon>expand_more</igx-icon>
</ng-template>

スタイル設定

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

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

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

最も単純なアプローチに従って、grid-theme を拡張し、$sorted-header-icon-color および sortable-header-icon-hover-color パラメーターを受け取ります。

$custom-theme: grid-theme(
    $sorted-header-icon-color: #ffb06a,
    $sortable-header-icon-hover-color: black
);

最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを含めることです。

 @include grid($custom-theme);

Note

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。

:host {
   ::ng-deep {
       @include grid($custom-theme);
   }
}

カラーパレットの定義

上記のように色の値をハードコーディングする代わりに、igx-palette と igx-color 関数を使用することによって色に関してより高い柔軟性を持つことができます。

igx-palette は渡された一次色と二次色に基づいてカラーパレットを生成します。

$black-color: black;
$orange-color: #ffb06a;

$custom-palette: palette($primary: $black-color, $secondary: $orange-color);

次に igx-color を使用してパレットから簡単に色を取得できます。

$custom-theme: grid-theme(
    $sorted-header-icon-color: color($custom-palette, "secondary", 500),
    $sortable-header-icon-hover-color: color($custom-palette, "primary", 500)
);

Note

igx-color と igx-palette は色の生成や取得のための関数です。使い方の詳細については パレット のトピックをご覧ください。

スキーマの使用

テーマ エンジンを使用してスキーマの利点を活用でき、堅牢で柔軟な構造を構築できます。スキーマはテーマを使用する方法です。

すべてのコンポーネントに提供されている 2 つの定義済みスキーマ (ここでは _light-grid) の 1 つを拡張します。

// Extending the light grid schema
$custom-grid-schema: extend($_light-grid,
    (
        sorted-header-icon-color: (igx-color:('secondary', 500)),
        sortable-header-icon-hover-color: (igx-color:('primary', 500))
    )
);

カスタム スキーマを適用するには、グローバル (light または dark) の 1 つを拡張する必要があります。これは基本的にカスタム スキーマでコンポーネントをポイントし、その後それぞれのコンポーネントテーマに追加するものです。

// Extending the global light-schema
$my-custom-schema: extend($light-schema, 
    (
        igx-grid: $custom-grid-schema
    )
);

// Defining our custom theme with the custom schema
$custom-theme: grid-theme(
  $palette: $custom-palette,
  $schema: $my-custom-schema
);

上記と同じ方法でテーマを含める必要があることに注意してください。

デモ

Note

このサンプルは、「テーマの変更」から選択したグローバル テーマに影響を受けません。

API リファレンス

• IgxTreeGridComponent API
• IgxTreeGridComponent スタイル
• ISortingExpression

その他のリソース

• Tree Grid 概要
• 仮想化とパフォーマンス
• ページング
• フィルタリング
• 集計
• 列移動
• 列のピン固定
• 列のサイズ変更
• 選択

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)