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

grid drag and drop 멀티 선택 가능 > Q&A | 토론

본문 바로가기

VueJS grid drag and drop 멀티 선택 가능

페이지 정보

작성자 anue 작성일 2022-07-25 16:37 조회 1,693회 댓글 0건
제품 버전 : wijmo5

본문


https://dev.grapecity.co.kr/bbs/board.php?bo_table=wijmo_qna&wr_id=516 


해당 글 참고하여

위즈모 그리드에 대한 드래그 앤 드롭 기능을 구현하였습니다.

여기서 멀티 row를 선택하여 드롭을 하려면 어떻게 해야하나요 ? 


drag하는 그리드에서 selectionMode를 Listbox로 설정하고

멀티로 cell을 끌어당겨오려고 해도, wjGrid CellRange에 잡히지 않습니다.


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

댓글목록

등록된 댓글이 없습니다.

3 답변

VueJS Re: grid drag and drop 멀티 선택 가능

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

페이지 정보

작성자 GCK루시 작성일 2022-07-27 14:13 댓글 0건

본문

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


문의 주신 FlexGrid 간 다중 행 drag/drop 기능의 경우 selectionMode를 "ListBox"로 설정 후, 선택된 행에 대한 정보를 별도 변수에 저장하고 drop 시 그리드의 sourceCollection에 해당 행 정보가 추가될 수 있도록 설정하시면 됩니다.


자세한 코드는 아래 샘플에서 확인하실 수 있습니다. 샘플에서는 ctrl + 셀 클릭으로 행을 선택한 뒤 rowHeader를 drag하여 다른 그리드로 이동 및 drop할 때 그리드 행에 추가 해주고 있습니다.



 


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


감사합니다.

그레이프시티 드림


댓글목록

등록된 댓글이 없습니다.

VueJS Re: grid drag and drop 멀티 선택 가능

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

페이지 정보

작성자 anue 작성일 2022-07-27 16:09 댓글 0건

본문


답변 감사합니다.

drag 시, rowHeader가 아닌 cell을 다중선택하여 drop하는 방법은 없을까요?


해당 그리드의 headersVisibility="Column" 속성을 추가하여 

rowHeader를 없애고, cell만을 보이게 한 뒤

한 row의 전체 cell을 drag하여 기능을 구현하고 싶습니다.


댓글목록

등록된 댓글이 없습니다.

VueJS Re: grid drag and drop 멀티 선택 가능

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

페이지 정보

작성자 GCK루시 작성일 2022-07-29 15:21 댓글 3건

본문

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


문의 주신 row header가 아닌 셀을 이용하여 행의 drag/drop 기능을 구현하는 방법에 대해 안내 드립니다.


먼저, 셀을 커스터마이징하는데 사용하는 포맷터 함수를 가져오거나 설정하는 itemFormatter에서 cell의 draggable 속성을 true로 할당해줍니다. 그 다음 셀을 클릭하고 drag할 때, 행의 selection 상태가 변경되지 않도록 클릭 이벤트 발생 시 stopPropagation 메서드를 호출해주시면 됩니다.


샘플에서는 ctrl + shift + 마우스 클릭 시 stopPropagation 메서드를 호출하고 선택된 행들의 상태를 유지해주고 있으며 drag/drop 시 행들이 이동된 것을 확인하실 수 있습니다.



- itemFormatter

 

API 문서를 같이 전달 드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.


감사합니다.

그레이프시티 드림

댓글목록

anue님의 댓글

anue 작성일

답변 감사드립니다. 마지막으로 질문드릴 게 있는데요.
ctrl + 마우스 클릭 조합으로 다중 row 선택 후,
shitf 키를 제외한 ctrl + 마우스 클릭 조합만으로 다중 drag를 할 수 있는 방법은 없나요?

stopPropagation 호출 시, shitfKey부분을 제거하였음에도
다중 선택 후, drag하는 순간, 선택 행들이 유지되지 않고 풀어져 하나의 row만 이동하는 현상이 발생합니다.

GCK루시님의 댓글의 댓글

GCK루시 작성일

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

문의 주신 내용에 대해 확인할 사항이 있어 질문 드립니다.
공유 드린 샘플에서 그리드 selection 초기화를 방지하는 코드 조건문 중 e.shiftKey 조건을 빼면 selectionMode의 ListBox에서 ctrl+click 하여 행을 선택하는 액션 또한 동작하지 않게 됩니다. 
stopPropagation  영역에 조건을 추가하신 코드가 있으신지 공유 부탁 드립니다.

더불어 ctrl + click 이벤트의 중복 문제로 인해 shiftKey 등 조건을 추가하였으며 관련하여 rowHeader를 선택하거나 다른 키를 입력하는 등 별도 조건을 추가할 수 없는 상황이신지 확인 후 회신 주시면 감사드리겠습니다.

감사합니다.
그레이프시티 드림

GCK루시님의 댓글의 댓글

GCK루시 작성일

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

문의하신 내용과 관련하여 회신이 없어 답변 완료 처리하였습니다.
추가 질문 사항이 있으신 경우, 새 글을 작성 및 등록하여 문의 주시기 바랍니다. 

감사합니다.
그레이프시티 드림

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