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

FlexGrid 에서 Selector 사용시 조건에 따라 특정 Row에 대한 선택 및 해제 문의 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

ReactJS FlexGrid 에서 Selector 사용시 조건에 따라 특정 Row에 대한 선택 및 해제 문의

페이지 정보

작성자 준승파파 작성일 2024-05-30 16:15 조회 149회 댓글 0건
제품 버전 : 5.20241.9
컨트롤 이름 : FlexGrid, Selector

본문

현재 FlexGrid에서 Selector(rowHeader 아닌 다른 컬럼에 적용) 와 MergeManager를 사용해서 그리드 구성을 하고 있는데 특정 조건에 따라 각 Row에 대한 체크 박스를 제어 기능이 필요 한데

특정 조건에 해당 하는 Row는 formatItem 이벤트에서 addClass(e.cell, "wj-state-disabled")

적용 해서 각 행에 대한 disable 제어는 가능 한 상태 인데

아래 이미지 처럼 전체 선택을 하게 되면 disable 처리 된 행까지 같이 선택 및 해제가 되고

있는데 disable 된 행은 영향 받지 않고 전체 선택 및 해제가 가능 한지 확인 바랍니다.



 


 

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

댓글목록

등록된 댓글이 없습니다.

4 답변

ReactJS Re: FlexGrid 에서 Selector 사용시 조건에 따라 특정 Row에 대한 선택 및 해제 문의

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

페이지 정보

작성자 MESCIUS엘라 작성일 2024-06-03 13:28 댓글 0건

본문

안녕하세요 메시어스입니다.


Selector 컨트롤를 통해 disabled 처리된 행을 제외한 전체 행 선택 및 해제의 경우, 행의 선택 여부를 판별하는 isSelected 속성을 사용하여 구현할 수 있습니다.


먼저 formatItem 이벤트에서 선택을 제어하려는 체크박스 셀에 'wj-state-disabled' 클래스를 추가합니다.


그 다음 전체 선택 체크박스에 click 이벤트가 발생할 때, 선택을 제어하려는 행의 isSelected 속성을 false로 설정하여 전체 선택 시 해당 행이 선택되지 않도록 처리할 수 있습니다.


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

(샘플에서는 Country 열이 US인 행의 체크박스를 disabled 처리하였습니다.)



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


감사합니다.

메시어스 드림


댓글목록

등록된 댓글이 없습니다.

ReactJS Re: FlexGrid 에서 Selector 사용시 조건에 따라 특정 Row에 대한 선택 및 해제 문의

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

페이지 정보

작성자 준승파파 작성일 2024-06-03 17:20 댓글 0건

본문

첨부파일

주신 소스 기반을 적용 시켜서 개발 중에 


formatItem 이벤트 핸들러 에서 


if (
        e.panel.cellType === 2 &&
        e.col === 1 &&
        e.cell.querySelector('input').indeterminate
      ) {
        e.cell.querySelector('input').checked = true;
      }


아래 와 같이 속성을 인식 못해서 에러가 나고 있습니다.


Binding 시점이 달라서 그런건지 실제 로그를 찍어 보면 input check 박스를 찾을

수 없어서 에러가 나고 있습니다. 관련 에러 메세지 첨부 드립니다.


위 부분을 주석 처리 하고는 오류가 나지 않고 기본 동작은 되고 있습니다.









댓글목록

등록된 댓글이 없습니다.

ReactJS Re: FlexGrid 에서 Selector 사용시 조건에 따라 특정 Row에 대한 선택 및 해제 문의

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

페이지 정보

작성자 MESCIUS엘라 작성일 2024-06-07 08:07 댓글 1건

본문

안녕하세요 메시어스입니다.


안타깝게도 공유해주신 'Cannot read properties of null (reading 'indeterminate')' 오류 메시지가 저희쪽에서 재현되지 않아 정확한 원인 파악에 어려움이 있습니다.


저희쪽으로 재현 가능한 샘플 프로젝트를 zip 파일로 공유해주시면 확인 및 디버깅 후 안내 드리겠습니다.


감사합니다.

메시어스 드림

댓글목록

준승파파님의 댓글

준승파파 작성일

현재 위지모 5.20241.9 버전에 리액트 17로 개발을 하고 있는데 개발 진행 시 문제 될 사항이 혹시 있을까요?
리액트 18로 업그레이드 할 경우 고려 해야 될 사항이 있는지 궁금 합니다.
 

ReactJS Re: FlexGrid 에서 Selector 사용시 조건에 따라 특정 Row에 대한 선택 및 해제 문의

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

페이지 정보

작성자 MESCIUS엘라 작성일 2024-06-11 11:52 댓글 0건

본문

안녕하세요 메시어스입니다.

 

우선, Wijmo 2024 v1를 React 17에서 사용하실 수 있습니다. 다만 Wijmo 2024 v1은 React 18 버전에 맞게 지원하고 있습니다. 더불어 React 18 버전에서는 ReactDOM을 불러오는 경로의 변경 사항으로 인해 프로젝트 실행 시 Module not found: Error: Can't resolve 'react-dom/client' 경고 메세지가 나타날 수 있습니다.

 

이를 해결하기 위해서는 아래 포럼 문의글에서 해당 경고메세지 해결 방법에 대한 답변을 확인해보시기 바랍니다. 

- 위즈모 그리드 업그레이드 이슈


이는 React 프레임워크에서 자체적으로 지원하는 모듈 경로 등이 버전 별로 차이가 있어 발생한 현상이며 이점 다시 한 번 업무에 참고 부탁드립니다.

 

더불어 Wijmo 2024 v1, React 18 지원과 관련된 문서를 첨부해 드리오니 확인하여 보시길 바랍니다.

- Wijmo 2024 v1 출시

- Wijmo가 React 18을 지원합니다.


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


감사합니다.

메시어스 드림


댓글목록

등록된 댓글이 없습니다.

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