React Hierarchical Grid 行のピン固定

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

    React Hierarchical Grid 行ピン固定の例

    EXAMPLE
    TSX
    CSS
    Edit in:

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

    行のピン固定 UI

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

    <IgrHierarchicalGrid>
    <IgrColumn field="Country" header="Country"> </IgrColumn>
    <IgrActionStrip key="actionStrip">
        <IgrGridPinningActions key="pinningActions"></IgrGridPinningActions>
        <IgrGridEditingActions key="editingActions"></IgrGridEditingActions>
    </IgrActionStrip>
</IgrHierarchicalGrid>
tsx
    Ignite UI for React | CTA Banner

    行のピン固定 API

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

    gridRef.current.getRowByIndex(0).pinned = true;
tsx

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

    gridRef.current.pinRow('ALFKI');
gridRef.current.unpinRow('ALFKI');
tsx

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

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

    function rowPinning(grid: IgrGridBaseDirective, event: IgrPinRowEventArgs ) {
    event.detail.insertAtIndex = 0;
}

<IgrHierarchicalGrid autoGenerate="true" rowPinning={rowPinning}>
</IgrHierarchicalGrid>
tsx

    ピン固定の位置

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

    <IgrHierarchicalGrid id="dataGrid" autoGenerate="true">
</IgrHierarchicalGrid>

var grid = document.getElementById("dataGrid") as IgrHierarchicalGrid;
grid.pinning = { rows: RowPinningPosition.Bottom };
tsx

    カスタム行ピン固定 UI

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

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

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

    function cellPinCellTemplate(ctx: IgrCellTemplateContext) {
    const row = ctx.dataContext.cell.row;
    return (
        <>
            <span onPointerDown={(e: any) => toggleRowPin(row)}>📌</span>
        </>
    );
}

<IgrHierarchicalGrid primaryKey="ID" autoGenerate="false">
    <IgrColumn width="70px" bodyTemplate={cellPinCellTemplate}>
    </IgrColumn>
    <IgrRowIsland childDataKey="Orders" autoGenerate="true"></IgrRowIsland>
</IgrHierarchicalGrid>
tsx

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

    function toggleRowPin(row: IgrRowType) {
  row.pinned = !row.pinned;
}
tsx

    デモ

    EXAMPLE
    TSX
    CSS
    Edit in:

    行ピン固定の制限

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

    スタイル設定

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

    <IgrHierarchicalGrid className="grid"></IgrHierarchicalGrid>
tsx

    次に、そのクラスに関連する 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
    TSX
    CSS
    Edit in:

    API リファレンス

    その他のリソース

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