グリッドの列サイズ変更

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

グリッドの列サイズ変更デモ


列のサイズ変更も列レベルで有効にできます。つまり、igx-grid にサイズ変更可能な列およびサイズ変更不可の列の両方を含むことが可能で igx-columnresizable 入力によって制御されます。

    <igx-column [field]="Name" [width]="'200px'" [resizable]="true"></igx-column>
    <igx-column [field]="AthleteNumber" [width]="'200px'"></igx-column>

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

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

列のサイズ変更の制限

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

    <igx-column [field]="Name" [width]="'150px'" [resizable]="true" [minWidth]="'60px'"
        [maxWidth]="'250px'"></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();

ピン固定列のサイズ変更

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

API リファレンス

その他のリソース

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