! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

병합된 셀 그룹 이동 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

ReactJS 병합된 셀 그룹 이동

페이지 정보

작성자 tommy 작성일 2022-11-18 16:48 조회 1,192회 댓글 0건
제품 버전 : 5.20211.781
컨트롤 이름 : FlexGrid

본문

셀 병합 예제에서 allowDragging: AllowDragging.Both 속성을 추가하여 드래그가 잘 되는 것은 확인했습니다.

그런데 필요한 기능은 병합된 셀 그룹을 동시에 이동하는 것입니다. 왼쪽에 빨간 네모 표시된 부분도 병합을 할 수 있는지요?

병합 후 이동도 가능했으면 좋겠습니다.


 

 

  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

1 답변

ReactJS Re: 병합된 셀 그룹 이동

추천1 이 글을 추천하셨습니다 비추천0 채택채택

페이지 정보

작성자 GCK다이애나 작성일 2022-11-21 17:04 댓글 0건

본문

첨부파일

안녕하세요 그레이프시티입니다.


문의 주신 내용에 대해 다음과 같이 답변 드립니다.

1. 병합된 셀을 기준으로 행의 헤더를 병합하는 방법

FlexGrid 컨트롤의 MergeManager 클래스를 재 정의한 후 해당 클래스를 FlexGrid 컨트롤의 mergeManager 속성에 할당하여 특정 기준에 맞게 셀을 병합할 수 있습니다.

병합된 셀을 기준으로 행의 헤더를 병합하시려는 경우, 셀의 cellType 속성이 "RowHeader" 일 때 dataItem 속성의 특정 값이 동일한 셀을 병합하는 코드를 구현하시면 됩니다.

자세한 코드는 아래의 샘플을 참고해 보시기 바랍니다.


이와 관련된 데모 및 API 문서를 공유 드리오니 참고해 보시기 바랍니다.

- 사용자 정의 병합 (React) 데모

- MergeManager  API 문서

- cellType API 문서

- CellType Enumeration RowHeader API 문서

- dataItem API 문서


2. 병합된 셀을 기준으로 행을 드래그 및 드롭으로 위치를 변경하는 방법

allowDragging 속성이 "Both" 로 지정된 FlexGrid 컨트롤의 draggingRow 이벤트와 draggedRow 이벤트를 이용하여 병합된 셀을 기준으로 행의 위치를 변경할 수 있습니다.

draggingRow 이벤트에는 병합된 셀이 속하는 행들의 인덱스 값을 불러와 저장하는 코드를, draggedRow 이벤트에는 splice 메서드를 이용하여 병합된 셀이 속하는 행들의 위치를 변경하는 코드를 구현해 보시기 바랍니다.

자세한 코드는 아래의 코드를 참고해 보시기 바랍니다.

  let dragIndex = []; // 병합된 셀이 속하는 행들의 인덱스 값
  const draggingRow = (s, e) => { // 병합된 셀이 속하는 행들의 인덱스 값을 불러오는 코드
    dragIndex = [];
    let country = s.rows[e.row].dataItem.country;
    for (var i = 0; i < s.rows.length; i++) {
      if (s.rows[i].dataItem.country == country) {
        dragIndex.push(i);
      }
    }
  };
  const draggedRow = (s, e) => { // 병합된 셀이 속하는 행들의 위치를 변경하는 코드
    let dropIndex = e.row,
      arr = s.collectionView.items,
      item = [];
    s.collectionView.deferUpdate(() => {
      for (var i = 0; i < dragIndex.length; i++) {
        item.push(arr[dragIndex[i]]);
      }
      arr.splice(dragIndex[0], dragIndex.length);
      if (dragIndex[0] >= dropIndex) { // 아래의 행을 위로 드래그 앤 드롭
        for (var i = 0; i < item.length; i++) {
          arr.splice(dropIndex + i, 0, item[i]);
        }
      } else if (dragIndex[0] < dropIndex) { // 위의 행을 아래로 드래그 앤 드롭
        for (var i = 0; i < item.length; i++) {
          arr.splice(dropIndex - (item.length - 1) + i, 0, item[i]);
        }
      }
    });


이와 관련된 데모 및 API 문서를 공유 드리오니 참고해 보시기 바랍니다.

- 재정렬 | Reordering (React) 데모

- draggingRow API 문서

- draggedRow API 문서

- items API 문서

- deferUpdate API 문서


다른 궁금한 점이 생기면, 문의 주시기 바랍니다.


감사합니다.


그레이프시티 드림


댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.