Web Components 그리드 선택 개요

    웹 구성 요소 그리드의 Web Components 요소 선택 기능을 Ignite UI for Web Components 사용하면 간단한 마우스 상호 작용을 통해 데이터와 쉽게 상호 작용하고 데이터를 조작할 수 있습니다. 다음 세 가지 선택 모드를 사용할 수 있습니다.

    • 행 선택
    • 셀 선택
    • Column selection

    ​rowSelection 속성을 사용하면 다음을 지정할 수 있습니다.

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

    Web Components Grid Selection Example

    아래 샘플은 세 가지 유형의 셀 선택의 행동 IgcGridComponent. 아래 버튼을 사용하여 사용 가능한 각 선택 모드를 활성화합니다.

    Web Components Grid Selection Options

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

    Web Components Grid Row Selection

    ​rowSelection 속성을 사용하면 다음 옵션을 지정할 수 있습니다.

    • None-IgcGridComponent에 대한 행 선택이 비활성화됩니다.
    • Single-IgcGridComponent 내에서 행 하나만 선택할 수 있습니다.
    • Multiple- 다중 행 선택은 행 선택기를 사용하거나 ctrl + 클릭과 같은 키 조합을 사용하거나 셀에 초점을 맞춘 후 스페이스 키를 눌러 사용할 수 있습니다.

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

    Web Components Grid Cell Selection

    속성 cellSelection 사용하면 다음 옵션을 지정할 수 있습니다.

    • None-IgcGridComponent에 대한 셀 선택이 비활성화됩니다.
    • Single-IgcGridComponent 내에서 하나의 셀만 선택할 수 있습니다.
    • Multiple- 현재 이는 IgcGridComponent 선택의 기본 상태입니다. 다중 셀 선택은 마우스 왼쪽 버튼을 계속 클릭한 후 셀 위로 마우스를 드래그하여 선택할 수 있습니다.

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

    Web Components Grid Column Selection

    이 selectable 속성을 사용하면 각각 IgcColumnComponent에 대해 다음 옵션을 지정할 수 있습니다. 해당 열 선택은 이 속성이 각각 true 또는 false로 설정된 경우 활성화되거나 비활성화됩니다.

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

    • 단일 선택 - 열 셀을 마우스로 클릭합니다.
    • 다중 열 선택 -Ctrl + 마우스를 누른 채 열 셀을 클릭합니다.
    • 범위 열 선택 -Shift 키를 누른 채 마우스를 클릭하면 그 사이의 모든 항목이 선택됩니다.

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

    Web Components Grid Context Menu

    ​ContextMenu 이벤트를 사용하면 사용자 정의 컨텍스트 메뉴를 추가하여 IgcGridComponent 작업을 용이하게 할 수 있습니다. 그리드 본체를 마우스 오른쪽 버튼으로 클릭 하면 이벤트가 트리거되는 셀을 방출합니다. 상황에 맞는 메뉴는 방출된 셀과 함께 작동합니다.

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

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

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

    ​IgcGridComponent는 복사된 데이터를 가져와서 컨테이너 요소에 붙여넣습니다.

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

        <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

    Additional Resources

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