Web Components 그리드 선택 개요

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

• 행 선택
• 셀 선택
• Column selection

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

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

Web Components Grid Selection Example

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

Web Components Grid Selection Options

The Ignite UI for Web Components IgcGridComponent component provides three different selection modes - Row selection, Cell selection and Column selection. By default only Multi-cell selection mode is enabled in the IgcGridComponent. In order to change/enable selection mode you can use rowSelection, cellSelection or selectable properties.

Web Components Grid Row Selection

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

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

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

Web Components Grid Cell Selection

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

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

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

Web Components Grid Column Selection

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

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

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

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

Web Components Grid Context Menu

Using the ContextMenu event you can add a custom context menu to facilitate your work with IgcGridComponent. 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.

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

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

    public rightClick(event: any) {
        const eventArgs = event.detail;
        eventArgs.event.preventDefault();
        this.multiCellArgs = {};
        if (this.multiCellSelection) {
          const node = eventArgs.cell.selectionNode;
          const isCellWithinRange = this.grid.getSelectedRanges().some((range) => {
            if (
              node.column >= range.columnStart &&
              node.column <= range.columnEnd &&
              node.row >= range.rowStart &&
              node.row <= range.rowEnd
            ) {
              return true;
            }
            return false;
          });
          if (isCellWithinRange) {
            this.multiCellArgs = { data: this.multiCellSelection.data };
          }
        }
        this.contextmenuX = eventArgs.event.clientX;
        this.contextmenuY = eventArgs.event.clientY;
        this.clickedCell = eventArgs.cell;
        this.toggleContextMenu();
      }

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

• 선택한 셀의 값을 복사합니다.
• 선택한 셀의 dataRow를 복사합니다.
• 선택한 셀이 다중 셀 선택 범위 내에 있는 경우 선택한 데이터를 모두 복사합니다.

    public copySelectedRowData() {
        const selectedData = this.grid.getRowData(this.clickedCell.id.rowID);
        this.copyData(selectedData);
        const selectedDataArea = document.getElementById('selectedArea');
        selectedDataArea.innerText = JSON.stringify(selectedData);
        this.toggleContextMenu();
    }

    public copySelectedCellData() {
        const selectedData = this.clickedCell.value;
        this.copyData(selectedData);
        const selectedDataArea = document.getElementById('selectedArea');
        selectedDataArea.innerText = JSON.stringify(selectedData);
        this.toggleContextMenu();
    }


    public copySelectedData() {
        const selectedData = this.grid.getSelectedData();
        this.copyData(selectedData);
        const selectedDataArea = document.getElementById('selectedArea');
        selectedDataArea.innerText = JSON.stringify(selectedData);

        this.toggleContextMenu();
    }

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

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

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

    <div class="container sample">
      <div class="wrapper">
        <igc-grid auto-generate="false" width="50%" height="100%" name="grid" id="grid">
          <igc-column field="ProductID" header="Product ID">
          </igc-column>
          <igc-column field="ProductName" header="Product Name">
          </igc-column>
          <igc-column field="UnitsInStock" header="Units In Stock" data-type="number">
          </igc-column>
          <igc-column field="UnitPrice" header="Units Price" data-type="number">
          </igc-column>
          <igc-column field="Discontinued" data-type="boolean">
          </igc-column>
          <igc-column field="OrderDate" header="Order Date" data-type="date">
          </igc-column>
        </igc-grid>
        <div id="selectedArea" class="selected-data-area">
        </div>
      </div>
    </div>
    <div id="menu" style="display: none;" class="contextmenu">
      <span id="copySingleCell" class="item">
        <igc-icon name="content_copy"></igc-icon>Copy Cell Data
      </span>
      <span id="copyRow" class="item">
        <igc-icon name="content_copy"></igc-icon>Copy Row Data
      </span>
      <span id="copyMultiCells" class="item">
        <igc-icon name="content_copy"></igc-icon>Copy Cells Data
      </span>
    </div>
  </div>

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

결과는 다음과 같습니다.

Known Issues and Limitations

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

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

API References

• IgcGridComponent

Additional Resources

• 행 선택
• 셀 선택
• 페이징
• 필터링
• 정렬
• 요약
• 열 이동
• 가상화 및 성능

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

• Ignite UI for Web Components 포럼
• ​GitHub Ignite UI for Web Components