Grid 列サイズ変更

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

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>
Note

minWidth が値より小さい値に設定されてた場合も、列を 88px より小さいサイズに変更することはできません。

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

各列ヘッダーの右側をダブルクリックして列を自動サイズ調整することができます。列は、現在表示されているヘッダーを含む一番長いセル値にサイズ設定されます。この動作はデフォルトで有効なため、追加で構成する必要はありません。ただし、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% より大きい場合、自動サイズ調整操作は無視されます。これは、ピン固定されていない列を常にユーザーに表示して利用可能にするためです。

API リファレンス

その他のリソース

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