Web Components Hierarchical Grid 行のピン固定

Web Components Hierarchical Grid の Ignite UI for Web Components 行ピン固定機能を使用すると、1 つまたは複数の行をグリッドの上部または下部にピン固定できます。行ピン固定を使用すると、エンドユーザーは特定の順序で行をピン固定し、IgcHierarchicalGrid を垂直にスクロールしても常に表示される特別な領域に行を複製できます。Web Components Hierarchical Grid には組み込みの行ピン固定 UI が含まれており、Hierarchical Grid のコンテキストで ActionStrip コンポーネントを初期化することで有効になります。その他、カスタム UI を定義し、行のピン固定 API を介して行のピン固定状態を変更できます。

Web Components Hierarchical Grid 行ピン固定の例

行のピン固定 UI

組み込みの行ピン固定 UI は、GridPinningActions コンポーネントと ActionStrip コンポーネントを追加することで有効になります。アクション ストリップは、行にカーソルを合わせると自動的に表示され、表示されている行の状態に基づいてピン固定またはピン固定解除ボタンのアイコンが表示されます。ピン固定された行のコピーをビューにスクロールする追加のアクションがピン固定された行ごとに表示されます。

<igc-hierarchical-grid auto-generate="false">
    <igc-column field="Name" header="Full Name"></igc-column>
    <igc-action-strip>
        <igc-grid-pinning-actions></igc-grid-pinning-actions>
        <igc-grid-editing-actions></igc-grid-editing-actions>
    </igc-action-strip>
</igc-hierarchical-grid>

行のピン固定 API

行のピン固定は Row の Pinned 入力によって制御されます。デフォルトでピン固定行は IgcHierarchicalGrid の上側に固定して描画され、IgcHierarchicalGrid 本体のピン固定されていない行は垂直スクロールされます。

this.grid.getRowByIndex(0).pinned = true;

IgcHierarchicalGrid の PinRow または UnpinRow メソッドを使用して ID によって行をピン固定またはピン固定解除できます。

this.grid.pinRow('ALFKI');
this.grid.unpinRow('ALFKI');

注: 行の ID は、グリッドの PrimaryKey またはレコード インスタンス自体によって定義される主キー値です。両方のメソッドは操作に成功したかどうかを示すブール値を返します。よくある失敗の原因に行がすでにその状態になっていることがあります。

行は、最後にピンされた行の下にピン固定されます。ピン固定行の順序を変更するには、RowPinning イベントでイベント引数の InsertAtIndex プロパティを適切な位置インデックスに変更します。

<igc-hierarchical-grid id="grid" auto-generate="true">
</igc-hierarchical-grid>

constructor() {
    var grid1 = document.getElementById('grid1') as IgcHierarchicalGridComponent;
    grid1.data = this.data;
    grid1.addEventListener("rowPinning", this.rowPinning);
}

public rowPinning(event) {
    event.detail.insertAtIndex = 0;
}

ピン固定の位置

Pinning 設定オプションを使用して、行のピン固定の位置を変更できます。ピン固定の位置を Top または Bottom のいずれかに設定できます。 Bottom に設定すると、行がピン固定されていない行の後に、グリッドの一番下にレンダリングされます。ピン固定されていない行は垂直にスクロールできますが、ピン固定された行は下側に固定されます。

<igc-hierarchical-grid id="dataGrid" auto-generate="true"></igc-hierarchical-grid>

var grid = document.getElementById('dataGrid') as IgcHierarchicalGridComponent;
grid.pinning = { rows: RowPinningPosition.Bottom };

カスタム行ピン固定 UI

カスタム UI を定義し、関連する API を介して行のピン状態を変更できます。

アイコン付きの追加の列による

アクション ストリップの代わりに、すべての行にピンのアイコンを表示し、エンドユーザーが特定の行のピン状態をクリックして変更できます。 カスタム アイコンを含むセル テンプレートの列を追加することで実行できます。

<igc-hierarchical-grid id="grid" primary-key="ID" auto-generate="false">
    <igc-column id="column1" name="column1"></igc-column>
     <igc-row-island child-data-key="Orders" auto-generate="true">
    </igc-row-island>
</igc-hierarchical-grid>

constructor() {
    var grid = document.getElementById('grid') as IgcHierarchicalGridComponent;
    var column = document.getElementById('column1') as IgcColumnComponent;

    grid.data = this.data;
    column.bodyTemplate = this.pinCellTemplate;
}

public pinCellTemplate = (ctx: IgcCellTemplateContext) => {
   const row = ctx.cell.row;
    return html`<span @pointerdown=${(e: any) => this.togglePinning(row)}>📌</span>`;
}

カスタム アイコンをクリックすると、行の API メソッドを使用して関連する行のピン状態を変更できます。

public togglePinning(row: IgcRowType) {
    row.pinned = !row.pinned;
}

デモ

行のドラッグによる

ピン状態を変更するために、ピン固定された行とピン固定されていない行の間に直接行をドラッグアンドドロップできるようにするとします。 これは、行のドラッグ機能を有効にし、ドロップの際に API で行をピン固定/ピン固定解除することで実現できます。

デモ

定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。

<igc-hierarchical-grid class="grid"></igc-hierarchical-grid>

次に、そのクラスに関連する CSS プロパティを設定します。

.grid {
    --ig-grid-pinned-border-width: 5px;
    --ig-grid-pinned-border-style: double;
    --ig-grid-pinned-border-color: #FFCD0F;
    --ig-grid-cell-active-border-color: #FFCD0F;
}

行ピン固定の制限

API リファレンス

その他のリソース

コミュニティは常に新しいアイデアを歓迎しています。

• Ignite UI for Web Components フォーラム
• Ignite UI for Web Components GitHub