React Grid 선택 개요

    React Grid의 Ignite UI for React 사용하면 간단한 마우스 상호 작용을 사용하여 데이터와 쉽게 상호 작용하고 조작할 수 있습니다. 사용 가능한 선택 모드는 세 가지입니다.

    • 행 선택
    • 셀 선택
    • Column selection

    이 부동산을rowSelection 통해 다음과 같이 지정할 수 있습니다:

    • 없음
    • 하나의
    • 다중 선택

    React Grid Selection Example

    아래 샘플은 세 가지 유형의 세포 선택 행동을 보여줍니다.IgrGrid 아래 버튼을 사용해 사용 가능한 선택 모드를 모두 활성화하세요.

    React Grid Selection Options

    Ignite UI for ReactIgrGrid 구성 요소는 세 가지 선택 모드를 제공합니다 -행 선택, 셀 선택, 그리고 열 선택. 기본적으로 멀티셀 선택 모드만 활성화IgrGrid 되어 있습니다. 선택 모드를 변경하거나 활성화하려면 속성 또는 속성을 사용할rowSelection​cellSelection​selectable 수 있습니다.

    React Grid Row Selection

    속성은rowSelection 다음과 같은 옵션을 지정할 수 있게 해줍니다:

    • None- 행 선택은 해당 조건에서IgrGrid 비활성화됩니다.
    • Single- 한 행만 선택할 수 있습니다.IgrGrid​
    • Multiple- 다중 행 선택은 행 선택기를 사용해 +와 같은 CTRL​ ​click 키 조합을 사용하거나, 셀이 집중되면 누 space key를 수 있습니다.

    자세한 내용은 행 선택 항목을 참조하세요.

    React Grid Cell Selection

    속성은cellSelection 다음과 같은 옵션을 지정할 수 있게 해줍니다:

    • None- 셀 선택은 비활성화됩니다.IgrGrid​
    • Single- 선택 가능한IgrGrid 셀은 단 하나의 셀만 가능합니다.
    • Multiple- 현재 이 상태는 선택의 기본 상태입니다.IgrGrid 다중 셀 선택은 왼쪽 버튼 마우스를 연속으로 클릭한 후 셀 위를 마우스로 드래그하여 사용할 수 있습니다.

    자세한 내용은 셀 선택 항목을 참조하세요.

    React Grid Column Selection

    이 속성은selectable 각 항목IgrColumn 별로 다음과 같은 옵션을 지정할 수 있게 해줍니다. 해당 열 선택은 이 속성이 참 또는 거짓으로 설정되면 각각 활성화되거나 비활성화됩니다.

    이로 인해 다음 세 가지 변형이 발생합니다.

    • 단일 선택 - 열 셀을 마우스로 클릭합니다.
    • 다중 열 선택 - 열 셀을 누르고 CTRL + mouse click 누릅니다.
    • 범위 열 선택 - 홀딩 SHIFT + mouse click 그 사이의 모든 것을 선택합니다.

    자세한 내용은 열 선택 항목으로 이동하세요.

    React Grid Context Menu

    Using the ContextMenu event you can add a custom context menu to facilitate your work with IgrGrid. With a right click on the grid's body, the event emits the cell on which it is triggered. The context menu will operate with the emitted cell.

    ​다중 셀 선택이 있는 경우 선택된 셀이 다중 셀 선택 영역에 있는지 확인하는 로직을 넣습니다. 그렇다면 선택한 셀의 값도 내보냅니다.

    기본적으로 주요 기능은 다음과 같습니다.

    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);
};

    상황에 맞는 메뉴에는 다음과 같은 기능이 있습니다.

    • 선택한 셀의 값을 복사합니다.
    • 선택한 셀의 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);
};

    The IgrGrid will fetch the copied data and will paste it in a container element.

    그리드와 컨텍스트 메뉴를 결합하는 데 사용할 템플릿은 다음과 같습니다.

    <>
  <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>
</>

    여러 셀을 선택하고 마우스 오른쪽 버튼을 누릅니다. 상황에 맞는 메뉴가 나타나고 셀 데이터 복사를 선택하면 선택한 데이터가 오른쪽 빈 상자에 나타납니다.

    결과는 다음과 같습니다.

    Known Issues and Limitations

    그리드에 세트가 없primaryKey 고 원격 데이터 시나리오가 활성화되어 있을 때(페이징, 정렬, 필터링, 스크롤 시 원격 서버에 표시할 데이터를 가져오기 요청이 트리거될 때), 데이터 요청이 완료된 후 다음 상태가 줄로 사라집니다:

    • 행 선택
    • 행 확장/축소
    • 행 편집
    • 행 고정

    API References

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.