Grid 列ピン固定

単一または複数の列を Angular UI グリッドの左端にピン固定できます。Ignite UI for Angular の列固定は、ユーザーが特定の列順序で列をロックすることを可能にし、Grid で水平スクロール時にロックされた列が常に表示されます。

デモ


列固定 API

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

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

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

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

両方のメソッドは操作に成功したかどうかを示すブール値を返します。よくある失敗の原因として列がすでにそのステートになっていることがあります。pinColumn は、Grid よりピン固定領域が大きいか同じサイズの場合に失敗します。以下はその例です。

<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 列をピン固定すると、ピン固定領域が Grid の幅より大きくなります。

列をピン固定すると、一番右に配置されたピン固定列の右にピン固定されます。ピン固定列の順序を変更するには、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;
    }
}

ピン固定の制限

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

トラブルシューティング

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

警告:

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

API リファレンス

その他のリソース

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