グリッドの列のピン固定

単一または複数の列をグリッドの左端にピン固定できます。Ignite UI for Angular の列ピン固定機能を使用して列をピン固定した場合、水平スクロール時にピン固定した列が常に表示されます。

デモ


列のピン固定 API

ピン固定領域の幅がグリッドより大きくならない限り各列をピン固定できます。列のピン固定は igx-columnpinned 入力によって制御されます。ピン固定列は常にグリッドの左側に描画され、グリッド本体のピン固定されていない列の水平スクロールで固定されます。

<igx-grid #grid1 [data]="data | async" [width]="700px" [autoGenerate]="false" [paging]="true" [perPage]="6" (onColumnInit)="initColumns($event)"
    (onSelection)="selectCell($event)">
    <igx-column [field]="Name" [pinned]="true"></igx-column>
    <igx-column [field]="AthleteNumber"></igx-column>
    <igx-column [field]="TrackProgress"></igx-column>
</igx-grid>

グリッドの IgxGridComponentpinColumn または unpinColumn メソッドを使用してフィールド名によって列をピン固定またはピン固定解除できます。

this.grid.pinColumn("AthleteNumber");
this.grid.unpinColumn("Name");

両方のメソッドは操作に成功したかどうかを示すブール値を返します。よくある失敗原因に列が既にその状態である場合があります。pinColumn は、ピン固定領域がグリッドのサイズ以上である場合も失敗します。以下はその例です。

<igx-grid #grid1 [data]="data | async" [width]="300px" [autoGenerate]="false">
    <igx-column [field]="Name" [width]="200px" [pinned]="true"></igx-column>
    <igx-column [field]="AthleteNumber" [width]="200px"></igx-column>
</igx-grid>
var succeed = this.grid.pinColumn("AthleteNumber"); // pinning fails and succeed will be false

AthleteNumber 列をピン固定すると、ピン固定領域がグリッドの幅より大きくなります。

列をピン固定すると、一番右に配置されたピン固定列の右にピン固定されます。ピン固定列の順序を変更するには、onColumnPinning イベントでイベント引数の insertAtIndex プロパティを適切な位置インデックスに変更します。

<igx-grid #grid1 [data]="data | async" [autoGenerate]="true" (onColumnPinning)="columnPinning($event)"></igx-grid>
public columnPinning(event) {
    if (event.column.field === "Name") {
        event.insertAtIndex = 0;
    }
}

ピン固定の制限

  • 列幅をパーセンテージ (%) で設定した場合にピン固定列があるとグリッド本体およびヘッダー コンテンツが正しく配置されません。列のピン固定を正しく設定するには、列幅をピクセル (px) に設定するか、グリッドによって自動的に割り当てる必要があります。

トラブルシューティング

このセクションは、列固定機能で発生した問題を解決するためのトラブルシューティングを提供します。

警告

  • igxGrid - ピン固定領域がピン固定可能な最大幅を超過しています。次の列のピン固定は、問題を回避するために解除します。 ... . - この警告は初期時にユーザーが列のピン固定を過剰に定義した場合にスローされます。初期時にピン固定した列の合計幅は、グリッド幅の 80% を超えないようにしてください。超過した場合は、デフォルトでグリッドの最初の列を取得し、残りの列 (警告にリストされた列) はピン解除されます。グリッドでピン固定を初期化する前に onColumnInit イベントを使用して初期化時に手動で列のピン固定解除するかどうかを決定するためのロジックを実行でき、各列でトリガーされます。

API

追加のリソース

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