Grid 列サイズ変更

グリッド列のサイズ変更遅延では、Angular ドラッグ操作の実行中にサイズ変更インジケーターが一時的に表示されます。ドラッグ操作が完了すると、新しいグリッド列幅が適用されます。

Grid 列サイズ変更のデモ


列サイズ変更も列レベルで有効化にできます。つまり、igx-grid にサイズ変更可能な列とサイズ変更不可の列の両方を含むことが可能です。igx-columnresizable 入力で行うことができます。

<igx-column [field]="'ID'" width="100px" [resizable]="true"></igx-column>

igx-gridonColumnResized イベントにサブスクライブして列がサイズ変更されたにカスタム ロジックを実装します。以前の列幅、新しい列幅、および IgxColumnComponent オブジェクトがイベント引数で公開されます。

<igx-grid [data]="data" (onColumnResized)="onResize($event)" [autoGenerate]="false">
    <igx-column [field]="'ID'" width="100px" [resizable]="true"></igx-column>
    <igx-column [field]="'CompanyName'" width="100px" [resizable]="true"></igx-column>
</igx-grid>
public onResize(event) {
    this.col = event.column;
    this.pWidth = event.prevWidth;
    this.nWidth = event.newWidth;
}

列のサイズ変更の制限

列の最小幅および最大幅の構成も可能です。igx-columnminWidthmaxWidth 入力で行うことができます。この場合、サイズ変更インジケーターのドラッグ操作が制限されます。列が minWidth および maxWidth. によって定義される範囲以外にサイズ変更できないことをユーザーに通知します。

<igx-column [field]="'ID'" width="100px" [resizable]="true"
            [minWidth]="'60px'" [maxWidth]="'230px'"></igx-column>

ダブルクリックで列の自動サイズ調整

各列ヘッダーの右側をダブルクリックして列を自動サイズ調整することができます。列は、現在表示されているヘッダーを含む一番長いセル値にサイズ設定されます。この動作はデフォルトで有効なため、追加で構成する必要はありません。ただし、maxWidth がその列に設定された際に新しい幅が maxWidth 値より大きい場合、列は自動サイズ調整されません。この場合、列が maxWidth 値に設定されます。

公開した IgxColumnComponentautosize() を使用して列を動的に自動サイズ調整することも可能です。

@ViewChild('grid') grid: IgxGridComponent;

let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
column.autosize();

ピン固定列のサイズ変更

ピン固定列もサイズ変更できます。ただし、ピン固定される列のコンテナーが Grid 全体の幅の 80% より大きくできないため、サイズ変更が制限されます。 ピン固定列の自動サイズ調整で、新しい幅がピン固定列コンテナーが Grid 全体の幅の 80% より大きい場合、自動サイズ調整操作は無視されます。これは、ピン固定されていない列を常にユーザーに表示して利用可能にするためです。

スタイル設定

Grid 列のサイズ変更行のスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在するインデックス ファイルをインポートする必要があります。

// grid-resize-line-styling-sample.scss
@import '~igniteui-angular/lib/core/styles/themes/index';

最も簡単な方法は、igx-grid-theme を拡張し、 $resize-line-color パラメーター以外にも多くのパラメータを受け入れます。

$custom-grid-theme: igx-grid-theme(
    $resize-line-color: #0288D1
);
Note

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

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

カラーパレットの定義

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

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

$primary-color: #0288D1;
$secondary-color: #BDBDBD;

$custom-theme-palette: igx-palette($primary: $primary-color, $secondary: $secondary-color);

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

$custom-grid-theme: igx-grid-theme(
    $palette: $custom-theme-palette,
    $resize-line-color: igx-color($custom-theme-palette, 'secondary', 500)
);
Note

igx-colorigx-palette は色を生成したり取り出したりするための関数です。使い方の詳細については パレット のトピックを参照してください。

スキーマの使用

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

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

// Extending the light grid schema
$light-grid-schema: extend($_light-grid,
    (
        resize-line-color: (
            igx-color: ('secondary', 500)
            ),
        header-background: (
            igx-color: ("primary", 100)
            ),
        header-text-color: (
            igx-color: ("primary", 600)
            )
    )
);

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

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

// Specifying the palette and schema of the custom grid theme
$custom-grid-theme: igx-grid-theme(
    $palette: $custom-theme-palette,
    $schema: $custom-light-grid-schema
);

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

デモ

API リファレンス

その他のリソース

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