React Grid 選択の概要
React Grid の Ignite UI for React 選択機能を使用すると、単純なマウス操作を使用してデータを簡単に操作および操作できます。使用可能な選択モードは 3 つあります。
- 行の選択
- セルの選択
- 列の選択
rowSelection
プロパティを使用すると、以下を指定できます。
- None (なし)
- Single (単一)
- Multiple Select (複数選択)
React Grid 選択の例
以下のサンプルは、IgrGrid
の 3 種類のセル選択動作を示しています。以下のボタンを使用して、利用可能な各選択モードを有効にします。
React Grid 選択のオプション
Ignite UI for React IgrGrid
コンポーネントは、行選択、セル選択、列選択の 3 つの選択モードを提供します。デフォルトでは、IgrGrid
で複数セル選択モードのみが有効になっています。選択モードの変更または有効化は、rowSelection
、cellSelection
または selectable
プロパティを使用します。
React Grid 行選択
プロパティ rowSelection
を使用すると、次のオプションを指定できます。
None
-IgrGrid
の行選択が無効になります。Single
-IgrGrid
内の 1 行のみの選択が利用可能になります。Multiple
- 複数行の選択は、Ctrl + クリック、Space キー を押して行セレクターを使用することにより、複数行の選択が可能になります。
詳細については、行選択トピックを参照してください。
React Grid セル選択
以下のオプションは、プロパティ cellSelection
で指定できます。
None
-IgrGrid
のセル選択が無効になります。Single
-IgrGrid
内の 1 セルのみの選択が利用可能になります。Multiple
-IgrGrid
の選択のデフォルト状態です。複数セルの選択は、マウスの左ボタンを連続してクリックした後、マウスをセル上にドラッグすることで利用できます。
詳細については、セル選択トピックを参照してください。
React Grid 列選択
selectable
プロパティを使用して、IgrColumn
ごとに以下のオプションを指定できます。このプロパティが true または false に設定されている場合、対応する列の選択がそれぞれ有効または無効になります。
以下の 3 つのバリエーションがあります。
- Single selection (単一選択) - 列セルをマウス クリックします。
- Multi column selection (複数列の選択) - Ctrl キーを押しながら列セルをマウス クリックします。
- Range column selection (列の範囲選択) - Shift キーを押しながら + マウス クリック、その間のすべての列が選択されます。
詳細については、列選択トピックを参照してください。
React Grid コンテキスト メニュー
ContextMenu
イベントは、カスタム コンテキスト メニューを追加して、IgrGrid
での作業をアシストします。グリッドの本体を右クリックすると、イベントはトリガーされたセルを放出します。コンテキスト メニューは、放出されたセルで動作します。
複数セルの選択がある場合、選択したセルが複数セルの選択領域にあるかどうかをチェックするロジックを配置します。その場合、選択したセルの値も出力します。
基本的に、メイン関数は次のようになります。
function rightClick(grid: IgrGridBaseDirective, event: IgrGridCellEventArgs) {
const eventArgs = event.detail;
eventArgs.event.preventDefault();
const node = eventArgs.cell.id;
const isCellWithinRange = grid.getSelectedRanges().some((range: any) => {
if (node.columnID >= range.columnStart &&
node.columnID <= range.columnEnd &&
node.rowIndex >= range.rowStart &&
node.rowIndex <= range.rowEnd
) {
return true;
}
return false;
});
setIsCellWithinRange(isCellWithinRange);
setClickedCell(eventArgs.cell);
openContextMenu(eventArgs.event.clientX, eventArgs.event.clientY)
}
以下はコンテキストメニューの機能です。
- 選択したセルの value のコピー。
- 選択したセルの dataRow のコピー。
- 選択したセルが複数セルの選択範囲内にある場合、選択したすべてのデータをコピーします。
function copySelectedRowData() {
const selectedData = gridRef.current.getRowData(clickedCell.id.rowID);
copyData(selectedData);
closeContextMenu();
}
function copySelectedCellData() {
const selectedData = clickedCell.value;
copyData(selectedData);
closeContextMenu();
}
function copySelectedData() {
const selectedData = gridRef.current.getSelectedData(null,null);
copyData(selectedData);
closeContextMenu();
}
function copyData(data: any[]) {
const tempElement = document.createElement('input');
document.body.appendChild(tempElement);
tempElement.setAttribute('id', 'temp_id');
(document.getElementById('temp_id') as HTMLInputElement).value = JSON.stringify(data);
tempElement.select();
document.execCommand('copy');
document.body.removeChild(tempElement);
setSelectedData(JSON.stringify(data));
}
IgrGrid
はコピーされたデータを取得し、コンテナ要素に貼り付けます。
グリッドとコンテキスト メニューを組み合わせるために使用するテンプレート:
<>
<div className="container sample">
<div className="wrapper" onClick={closeContextMenu}>
<IgrGrid
autoGenerate="false"
data={northWindData}
primaryKey="ProductID"
ref={gridRef}
contextMenu={rightClick}>
<IgrColumn field="ProductID" header="Product ID">
</IgrColumn>
<IgrColumn field="ProductName" header="Product Name">
</IgrColumn>
<IgrColumn field="UnitsInStock" header="Units In Stock" dataType="number">
</IgrColumn>
<IgrColumn field="UnitPrice" header="Units Price" dataType="number">
</IgrColumn>
<IgrColumn field="Discontinued" dataType="boolean">
</IgrColumn>
<IgrColumn field="OrderDate" header="Order Date" dataType="date">
</IgrColumn>
</IgrGrid>
<div className="selected-data-area">
{selectedData}
</div>
</div>
</div>
<div style={{display: "none"}} className="contextmenu" ref={contextMenuRef}>
<span className="item" onClick={copySelectedCellData}>
<IgrIcon ref={iconRef} collection='material' name="content_copy"></IgrIcon>Copy Cell Data
</span>
<span className="item" onClick={copySelectedRowData}>
<IgrIcon collection='material' name="content_copy"></IgrIcon>Copy Row Data
</span>
{isCellWithinRange && (
<span className="item" onClick={copySelectedData}>
<IgrIcon collection='material' name="content_copy"></IgrIcon>Copy Cells Data
</span>)}
</div>
</>
複数のセルを選択し、マウスの右ボタンを押します。コンテキストメニューが表示され、セル データのコピー を選択すると、選択したデータが右側の空のボックスに表示されます。
結果:
既知の問題と制限
グリッドに primaryKey
が設定されておらず、リモート データ シナリオが有効になっている場合 (ページング、ソート、フィルタリング、スクロール時に、グリッドに表示されるデータを取得するためのリモート サーバーへのリクエストがトリガーされる場合)、データ要求が完了すると、行は次の状態を失います:
- 行の選択
- 行の展開/縮小
- 行の編集
- 行のピン固定
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。