Web Components Tree Grid 行のピン固定

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

    Web Components Tree Grid 行ピン固定の例

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    行のピン固定 UI

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

    <igc-tree-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-tree-grid>
html
    Ignite UI for Web Components | CTA Banner

    行のピン固定 API

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

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

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

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

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

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

    <igc-tree-grid id="grid" auto-generate="true">
</igc-tree-grid>
html
    constructor() {
    var grid1 = document.getElementById('grid1') as IgcTreeGridComponent;
    grid1.data = this.data;
    grid1.addEventListener("rowPinning", this.rowPinning);
}

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

    ピン固定の位置

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

    <igc-tree-grid id="dataGrid" auto-generate="true"></igc-tree-grid>
html
    var grid = document.getElementById('dataGrid') as IgcTreeGridComponent;
grid.pinning = { rows: RowPinningPosition.Bottom };
typescript

    カスタム行ピン固定 UI

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

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

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

    <igc-tree-grid id="grid" primary-key="ID" auto-generate="false">
    <igc-column id="column1" name="column1"></igc-column>
</igc-tree-grid>
html
    constructor() {
    var grid = document.getElementById('grid') as IgcTreeGridComponent;
    var column = document.getElementById('column1') as IgcColumnComponent;

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

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

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

    public togglePinning(index: number) {
    var grid = document.getElementsByTagName("igc-tree-grid")[0] as IgcTreeGridComponent;
    grid.getRowByIndex(index).pinned = !grid.getRowByIndex(index).pinned;
}
typescript

    デモ

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    行ピン固定の制限

    • データソースに存在するレコードのみをピン固定できます。
    • 行のピン固定状態は Excel にエクスポートされません。グリッドは行のピン固定が適用されずにエクスポートされます。
    • グリッドのスクロール可能領域におけるピン固定行のコピーは、ピン固定行が存在する状態で他のグリッド機能が動作するのに不可欠な役割を果たします。そのため、その生成を無効化または削除することはできません。
    • 行選択 は 行 ID のみで動作するため、ピン固定行を選択するとそのコピーも選択されます (逆も同様)。さらに、ピン固定領域での範囲選択 (Shift + クリックにより) は、スクロール可能な領域で行を範囲選択する場合と同じように機能します。結果として、間にある行はピン固定されていなくてもすべて選択されます。API を 介して選択した行を取得すると、選択した各レコードの単一のインスタンスのみを返します。

    スタイル設定

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

    <igc-tree-grid class="grid"></igc-tree-grid>
html

    次に、そのクラスに関連する 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;
}
css

    デモ

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    API リファレンス

    その他のリソース

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