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

TreeGrid 사용 시 체크박스 그룹 선택 > Q&A | 토론

본문 바로가기
로그인

로그인후 이용해주세요

아직 회원이 아니신가요?

회원가입
로그인
MESCIUS 카카오톡 채널 추가
메시어스 +
카카오톡 채널 추가를 통해 MESCIUS의 최신 정보, 이벤트, 세미나 정보를 빠르게 받아 보실수 있습니다
홈 링크 페이스북 링크 유튜브 링크

Wijmo

Q&A | 토론 - VueJS

VueJS TreeGrid 사용 시 체크박스 그룹 선택

페이지 정보

작성자 일반개발자
프로필 보기 쪽지 보내기
작성일 2023-11-01 14:09 조회 188회 댓글 1건
제품 버전 : 5.20231.888
컨트롤 이름 : treegrid

본문

VueJS로 Treegrid를 사용 중에 있습니다.


총 3depth까지 tree구조로 하여 grid를 사용하고 있습니다.


row header가 아닌 일반 필드의 데이터형이 boolean으로 되어있어 체크박스로 표기되 곳이 있는데요.


해당 필드의 체크박스를 선택했을 때 하위 계층의 요소들이 존재할 경우 해당하는 체크박스를 선택 또는 해체하고 싶습니다.




질문 정리하자면.


row header가 아닌 일반 boolean(true or false) 형태의 필드에서 체크박스를 선택 또는 해제했을 때 동일 필드의 하위 객체까지 적용이 되도록 하는 방법을 알고싶습니다.


감사합니다.

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

댓글목록

MESCIUS루시님의 댓글

MESCIUS루시
프로필 보기 쪽지 보내기
작성일

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

해당 문의는 확인 중에 있으며 업데이트가 되는대로 안내드리도록 하겠습니다.

감사합니다.
메시어스 드림

2 답변

VueJS Re: TreeGrid 사용 시 체크박스 그룹 선택

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

페이지 정보

작성자 MESCIUS루시
프로필 보기 쪽지 보내기
작성일 2023-11-07 11:14 댓글 1건

본문

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


문의하신 내용과 관련하여 본사 개발팀에 문의해본 결과, TreeGrid와 함께 boolean 타입 셀을 별도로 두어 하위 노드까지 상태 적용 유무 기능은 구현의 복잡성 및 예상치 못한 변수가 나타날 수 있습니다. 따라서 Boolean 타입 체크박스 셀이 아닌 Selector를 이용하여 구현하는 것을 추천드립니다


아래 간단한 샘플을 공유드리오니 참고 부탁드립니다.



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


감사합니다.

메시어스 드림

댓글목록

일반개발자님의 댓글

일반개발자
프로필 보기 쪽지 보내기
작성일

답변 감사합니다. 알겠습니다.

그렇다면 아래 예제와 같이 rowheader에서의 rownum이 표기 되고 그 옆에 셀렉터를 표기하려고 합니다.

https://codepen.io/MESCIUS-Korea/pen/GREBzqo?editors=0010


vuejs 환경에서 어떻게 설정하면 rowheader(rownum), selecctor(checkbox)가 동시에 표기 될 수 있는지 알려주시면 감사하겠습니다.

VueJS Re: TreeGrid 사용 시 체크박스 그룹 선택

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

페이지 정보

작성자 MESCIUS루시
프로필 보기 쪽지 보내기
작성일 2023-11-07 17:17 댓글 0건

본문

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


Vue와 PureJS 코드 사이의 큰 차이는 없으며 itemFormatter를 사용하고 싶으신 경우, 아래 코드와 같이 초기화 중에 설정해주시면 됩니다.


initialWorkerGrid(grid) {
      this.workerGrid = grid;
      new Selector(grid, { column: 0 });
      grid.itemFormatter = (panel, r, c, cell) => {
        if (panel.cellType == CellType.RowHeader) {
          cell.textContent = (r + 1).toString();
        }
      };
    },

- itemFormatter API 문서


관련 API 문서를 공유드리며 다른 궁금한 점이 생기면 문의주시기 바랍니다.


감사합니다.

메시어스 드림

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

카테고리

인기글

더보기

최신글

더보기

셀럽

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