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

grid selector에 대해 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

VueJS grid selector에 대해

페이지 정보

작성자 마라떡볶이 작성일 2023-09-18 14:58 조회 969회 댓글 0건
제품 버전 : 5.20231.888
컨트롤 이름 : wjflexgrid, wjflexgridselector

본문

grid selector


그리드에 selector를 넣어서 맨 왼쪽에 체크박스가 생기도록 했습니다.

이때 그리드의 아무 셀이나 클릭하면, 그 셀이 속한 행의 체크박스가 자동으로 체크되도록 하고 싶습니다.


현재는 onSelectionChanged 이벤트를 다음과 같이 거는 방식으로 구현을 했습니다.

  let idx = -1;
  const rowHeader = document.querySelectorAll('[wj-part="root"] .wj-row');
  for (let i = 0; i < rowHeader.length; i++) {
    if (rowHeader[i].querySelector('.wj-state-active')) {
      idx = i;
      break;
    }
  }
  flexGrid.rowHeaders.hostElement.querySelectorAll("input").item(idx - 1).click();

이렇게 해도 되기는 하는데 한 번에 여러 셀을 빠르게 드래그 할 경우는 인식이 잘 안 됩니다.

혹시 selector에 직접 접근해서 바꾸거나 더 괜찮은 방법이 있을까요?

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

댓글목록

등록된 댓글이 없습니다.

2 답변

VueJS Re: grid selector에 대해

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

페이지 정보

작성자 GCK루시 작성일 2023-09-20 10:51 댓글 1건

본문

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


문의하신 기능과 관련하여 먼저 셀 드래그의 경우,  Selector 컨트롤을 추가하게 되면 그리드의 SelectionMode가 "Cell" 로 변경되어 셀 하나만 선택되기 때문에 셀 드래그가 되지 않는 것처럼 보일 수 있습니다. 따라서 Selector 추가 후 SelectionMode를 설정해주셔야 합니다. 


그 다음 FlexGrid의 selectionChanged 이벤트 내에서 isSelected 속성을 통해 체크된 상태로 전환해주시면 됩니다. 더불어 셀 드래그를 새롭게 수행할 때 기존의 선택 유무를 초기화를 위해서 그리드에 mousedown 이벤트 추가 후 해당 이벤트 내에서 selectedRows 속성 초기화해주시면 됩니다.


자세한 코드는 아래 샘플을 참고하여 주시기 바랍니다.



- selectionChanged API 문서

- isSelected API 문서

- selectedRows API 문서


관련하여 API 문서를 공유드리오니 참고 부탁드립니다.


감사합니다.

그레이프시티 드림


댓글목록

마라떡볶이님의 댓글

마라떡볶이 작성일

안녕하세요. 답변해주신 코드를 적용해봤습니다.
그런데 해당 코드를 적용하면 이미 선택된 행의 셀을 다시 클릭할 경우 선택 취소가 안 되는 문제가 있습니다.  제가 원하는 것은 체크박스 셀이 아닌 다른 셀을 선택해도 체크박스 셀을 선택한 것과 같이 선택/취소가 토글 되는 것입니다.
혹시 코드에 수정해야 할 부분이 있을까요?

감사합니다.

VueJS Re: grid selector에 대해

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

페이지 정보

작성자 GCK루시 작성일 2023-09-25 10:34 댓글 0건

본문

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


문의하신 내용의 경우, flexgrid.cells.hostElement의 'mousedown' 이벤트에서 이미 선택된 행의 경우 행 선택 취소처리해주시면 됩니다. 자세한 코드는 아래 샘플에서 확인하실 수 있습니다.



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


감사합니다.

그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

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