React Tree Grid セルの選択

React Tree Grid の Ignite UI for React セル選択により、豊富なデータ選択機能が有効になり、IgrTreeGrid コンポーネントで強力な API が提供されます。 React Tree Grid は、次の 3 つの選択モードをサポートしています。

• Tree Grid 複数セルの選択
• Tree Grid 単一選択
• Tree Grid 選択なし

これらの各オプションについて詳しく説明します。

React セル選択の例

以下のサンプルは、IgrTreeGrid の 3 種類のセル選択動作を示しています。以下のボタンを使用して、利用可能な各選択モードを有効にします。スナックバーのメッセージ ボックスを介して、各ボタンの操作に関する簡単な説明が提供されます。

選択タイプ

React Tree Grid 複数セルの選択

セルの選択方法:

• マウス ドラッグ - セルの長方形データ選択。
• CTRL キー押下 + マウス ドラッグ - 複数の範囲が選択されます。その他の既存のセル選択は保持されます。
• SHIFT キーを使用して複数セルの選択をインスタンス化します。SHIFT キーを押しながら、単一セルを選択して別の単一セルを選択します。2 つのセル間のセル範囲が選択されます。SHIFT キーを押しながら他の 2 番目のセルを選択すると、最初に選択したセルの位置 (開始点) に基づいてセル選択範囲が更新されます。
• SHIFT キーを押しながら 矢印 キーを使用してキーボードで複数セルを選択します。マルチセル選択範囲は、フォーカスされたセルに基づいて作成されます。
• CTRL キーを押しながら CTRL + ↑ ↓ ← → キーと CTRL + HOME / END を使用してキーボードで複数セルを選択します。マルチセル選択範囲は、フォーカスされたセルに基づいて作成されます。
• CTRL キーを押しながら左マウス キーでクリックすると、選択したセルコレクションに単一のセル範囲が追加されます。
• マウスでクリックしてドラッグすることで、連続した複数セルの選択が可能です。

デモ

Tree Grid 単一選択

CellSelection を single (単一) に設定すると、一度にグリッド内で選択されたセルを1つだけ持つことができます。また、マウス ドラッグ モードは機能せず、セルを選択する代わりに、デフォルトのテキスト選択が行われます。

選択モードが single (単一) であるか multiple (複数) であるかに関係なく、単一セルが Selected イベントが発生したときに発生します。複数セル選択モードでは、セル範囲を選択すると RangeSelected イベントが発生します。

Tree Grid 選択なし

セルの選択を無効にする場合は、CellSelection を none (なし) に設定するだけです。このモードでは、セルをクリックするかキーボードでナビゲートしようとすると、セルは選択されず、アクティブ化のスタイルのみが適用され、ページ上の他の要素をスクロールまたはクリックすると失われます。選択を定義する唯一の方法は、以下で説明する API メソッドを使用することです。

キーボード ナビゲーションのインタラクション

Shift キーが押されている間

• SHIFT + ↑ - 現在の選択範囲に上のセルを追加します。
• SHIFT + ↓ - 現在の選択範囲に下のセルを追加します。
• SHIFT + ← - 現在の選択に左のセルを追加します。
• SHIFT + → - 現在の選択範囲に右のセルを追加します。

Ctrl + Shift キーが押されている間

• CTRL + SHIFT + ↑ - 列内のフォーカスのあるセルの上にあるすべてのセルを選択します。
• CTRL + SHIFT + ↓ - 列内のフォーカスのあるセルの下にあるすべてのセルを選択します。
• CTRL + SHIFT + ← - 行の先頭まですべてのセルを選択します。
• CTRL + SHIFT + → - 行末まですべてのセルを選択します。
• CTRL + SHIFT + HOME - フォーカスされているセルからグリッド内の最初のセルまでのすべてのセルを選択します。
• CTRL + SHIFT + END - フォーカスされているセルからグリッド内の最後のセルまでのすべてのセルを選択します。

API の使用

以下は、範囲の選択、選択の解除、または選択したセル データを取得する方法です。

範囲の選択

IgrTreeGrid.selectRange - Select a range of cells with the API. rowStart and rowEnd should use row indexes and columnStart and columnEnd could use column index or column data field value.

const range: IgrGridSelectionRange[] = [{ rowStart: 2, rowEnd: 2, columnStart: "ProductName", columnEnd: "UnitsInStock" }];
gridRef.current.selectRange(range)

セル選択のクリア

IgrTreeGrid.clearCellSelection will clear the current cell selection.

gridRef.current.clearCellSelection();

選択したデータの取得

IgrTreeGrid.getSelectedData will return array of the selected data in format depending on the selection. Examples below:

GetSelectedData は、選択されたデータの配列をディクショナリで返します。以下は例です。

expectedData = [
    { CompanyName: 'Infragistics' },
    { Name: 'Michael Langdon' },
    { ParentID: 147 }
];

GetSelectedData は、選択したデータの配列を選択内容に応じた形式で返します。例:

expectedData = [
    { Address: 'Obere Str. 57'},
    { Address: 'Avda. de la Constitución 2222'},
    { Address: 'Mataderos 2312'}
];

• 3 つの異なる単一セルが選択されている場合:

expectedData = [
    { Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' }
];

• 1 列から 3 つのセルが選択されている場合:

expectedData = [
    { ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'},
    { ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.'}
];

• 1 行 3 列から 3 つのセルをマウスドラッグで選択した場合:

expectedData = [
    { ContactName: 'Martín Sommer', ContactTitle: 'Owner'},
    { ContactName: 'Laurence Lebihan', ContactTitle: 'Owner'},
    { Address: '23 Tsawassen Blvd.', City: 'Tsawassen'},
    { Address: 'Fauntleroy Circus', City: 'London'}
];

• 2 行 3 列から 3 つのセルをマウスドラッグで選択した場合:

expectedData = [
    { ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86'},
    { ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille'},
    { ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke'},
    { ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München'}
];

機能の統合

マルチセル選択はインデックス ベースです (DOM 要素選択)。

• Sorting - ソートが実行されると、選択は解除されません。昇順または降順でソートしている間、現在選択されているセルはそのままになります。昇順または降順でソートしている間、現在選択されているセルはそのままになります。
• Paging - ページング時に選択されたセルはクリアされます。選択はページを超えては持続されません。選択はページを超えては持続されません。
• Filtering - フィルタリングが実行されると、選択は解除されません。フィルタリングがクリアされている場合は、最初に選択されたセルが返されます。
• Resizing - 列のサイズを変更すると、選択したセルはクリアされません。
• Hiding - 選択したセルはクリアされません。列が非表示の場合は、次に表示されている列のセルが選択されます。
• Pinning - 選択したセルはクリアされません。非表示と同じです。
• GroupBy - 列をグループ化すると、選択したセルはクリアされません。

スタイル設定

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

<IgrTreeGrid className="treeGrid"></IgrTreeGrid>

Then set the related CSS properties for that class:

.treeGrid {
    --ig-grid-cell-selected-text-color: #fff;
    --ig-grid-cell-active-border-color: #f2c43c;
    --ig-grid-cell-selected-background: #0062a3;
    --ig-grid-cell-editing-background: #0062a3;
}

デモ

API リファレンス

その他のリソース

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

• Ignite UI for React フォーラム (英語)
• Ignite UI for React GitHub (英語)