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

Selector itemChecked 이벤트 처리방법 문의 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

PureJS Selector itemChecked 이벤트 처리방법 문의

페이지 정보

작성자 dounur 작성일 2022-10-27 10:50 조회 1,050회 댓글 2건
제품 버전 : wijmo-5.20221.842_KR
컨트롤 이름 : Selector

본문

안녕하세요.

FlexGrid 에 Selector 추가하여 작업 중입니다.

1. Selector 의 itemChecked 이벤트 시 방금  체크 된 row 1개에 대한 data 를 취하고 싶은데 방법을 모르겠습니다.

2.  Header 의 checkbox 인 전체 선택과 각 row 의 체크 에 대한 구분 방법을 알려주세요.


감사합니다.

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

댓글목록

GCK다이애나님의 댓글

GCK다이애나 작성일

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

Header 의 checkbox 인 전체 선택과 각 row 의 체크 에 대한 구분 방법에 대한 말씀은,  그리드의 열 헤더와 행 헤더가 겹치는 셀에 존재하는 checkbox를 체크해 그리드 전체를 선택하는 것과 특정 행 헤더에 존재하는 checkbox를 체크해 해당 행만 선택하는 것을 구분하는 방법에 대한 말씀으로 이해하면 될까요?
정확한 답변을 드리기 위해 요청 드리며 확인 후, 회신하여 주시기 바랍니다.

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

dounur님의 댓글

dounur 작성일

안녕하세요.
네 질문 내용이 맞습니다. 감사합니다.~

1 답변

PureJS Re: Selector itemChecked 이벤트 처리방법 문의

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

페이지 정보

작성자 GCK다이애나 작성일 2022-10-28 10:38 댓글 0건

본문

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


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

1. Selector 컨트롤의 itemChecked 이벤트를 이용하여 선택된 행의 데이터를 불러 오는 방법

그리드의 행 filter 속성과 조건문을 이용하여 행의 isSelected 속성이 true 이면 해당 행의 dataItem 속성 값을 불러오는 코드를 Selector 컨트롤의 itemChecked 이벤트에 구현해 보시기 바랍니다.


이와 관련된 API 문서를 첨부해 드리오니 참고해 보시기 바랍니다.

- filter API 문서

- isSelected API 문서

- dataItem API 문서


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


2. 그리드 내부의 모든 셀들을 선택하는 체크 박스와 특정 행의 셀들을 선택하는 체크 박스를 구분 하는 방법

그리드 클릭 시, hitTest 메서드와 CellType 속성을 이용하여 클릭된 부분이 체크 박스 인 경우 해당 체크 박스가 존재하는 영역을 확인할 수 있습니다.

CellType 속성이 RowHeader 인 경우 특정 행의 셀들을 선택하는 체크 박스 임을 나타내며,  TopLeft 인 경우 그리드 내의 모든 셀들을 선택하는 체크 박스 임을 나타내니 이점 참고해 주시기 바랍니다.


자세한 코드는 아래의 샘플을 참고해 보시기 바라며, 브라우저 창의 '개발자 도구>Console' 탭에서 선택된 체크 박스가 존재하는 영역에 대한 정보를 확인해 보실 수 있습니다.


추가적으로 Selector 컨트롤의 itemChecked 이벤트 호출 시, 그리드의 selectedItems 속성을 이용하여 확인하는 방법도 존재합니다.

다만, 그리드의 selectedItems 속성을 이용한 방법을 사용하시는 경우 그리드 내부의 모든 셀들을 선택하는 체크 박스 클릭 시 선택된 모든 셀의 데이터를 불러오기에 어려움이 있을 수 있습니다.

따라서 위의 방법을 이용해 보시는 것을 추천 드립니다.


이와 관련된 API 문서를 첨부해 드리오니 참고해 보시기 바랍니다.

- hitTest API 문서

- cellType API 문서

- CellType Enumeration API 문서

- selectedItems API 문서


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


감사합니다.


그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

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