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 での作業をアシストします。グリッドの本体を右クリックすると、イベントはトリガーされたセルを放出します。コンテキスト メニューは、放出されたセルで動作します。

複数セルの選択がある場合、選択したセルが複数セルの選択領域にあるかどうかをチェックするロジックを配置します。その場合、選択したセルの値も出力します。

基本的に、メイン関数は次のようになります。

const rightClick = (event: IgrGridContextMenuEventArgs) => {
    const eventArgs = event.detail;
    eventArgs.event.preventDefault();
  const node = eventArgs.cell.cellID;
  const isCellWithinRange = gridRef.current
    .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 のコピー。
• 選択したセルが複数セルの選択範囲内にある場合、選択したすべてのデータをコピーします。

const copySelectedRowData = () => {
  const selectedData = gridRef.current.getRowData(clickedCell.cellID.rowID);
    copyData(selectedData);
    closeContextMenu();
};

const copySelectedCellData = () => {
    const selectedData = clickedCell.value;
    copyData(selectedData);
    closeContextMenu();
};

const copySelectedData = () => {
  const selectedData = gridRef.current.getSelectedData(null, null);
    copyData(selectedData);
    closeContextMenu();
};

const 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();
  const dataStringified = JSON.stringify(data);
  navigator.clipboard.writeText(dataStringified).catch((err) => {
     console.error("Failed to copy: ", err);
  });
    document.body.removeChild(tempElement);
  setSelectedData(dataStringified);
};

IgrGrid はコピーされたデータを取得し、コンテナ要素に貼り付けます。

グリッドとコンテキスト メニューを組み合わせるために使用するテンプレート:

 <>
    <div className="container sample">
        <div className="wrapper" onClick={closeContextMenu}>
            <IgrGrid
        autoGenerate={false}
                data={northWindData}
                primaryKey="ProductID"
                ref={gridRef}
        onContextMenu={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 リファレンス

• IgrGrid

その他のリソース

• 行の選択
• セルの選択
• ページング
• フィルタリング
• ソート
• 集計
• 列の移動
• 仮想化とパフォーマンス

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

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