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

TreeView에서 Scroll 이동 문의 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

VueJS TreeView에서 Scroll 이동 문의

페이지 정보

작성자 Adps 작성일 2022-09-08 09:42 조회 1,658회 댓글 0건
제품 버전 : wijmo-5.20213.824

본문

첨부파일

TreeView에서 Select한 Node Or Display한 Node에 대해서 스크롤 바 포커스 이동을 시킬수 있나요?



ensureVisible(), Select 사용시에는 스크롤바가 변경되지 않습니다.


 


첨부한 상황에서 Search 동작 시 스크롤 바가 검색한 메뉴로 찾아가게 하고 싶습니다.

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

댓글목록

등록된 댓글이 없습니다.

3 답변

VueJS Re: TreeView에서 Scroll 이동 문의

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

페이지 정보

작성자 GCK다이애나 작성일 2022-09-08 14:09 댓글 0건

본문

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


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

ComboBox 혹은 AutoComplete 컨트롤을 이용해 검색한 항목을 TreeView 컨트롤의 selectedItem 속성으로 지정하여 스크롤 바의 위치를 변경할 수 있습니다.

아래의 샘플에서 ComboBox 컨트롤 혹은 AutoComplete 컨트롤에 'searching' 을 검색하여 확인해 보시기 바랍니다.

샘플은 다음과 같은 방법으로 구현되었습니다.

  1. TreeView 컨트롤를 생성합니다.
  2. 생성된 TreeView 컨트롤에 바인딩 된 데이터를 가공하는 _getSearchList 사용자 정의 함수를 선언합니다.
  3. _getSearchList 함수를 통해 가공한 데이터를 이용하여 ComboBox 컨트롤과 AutoComplete 컨트롤을 생성합니다.
  4. TreeView 컨트롤의 selectedItem 속성 값을 초기화 후, ComboBox 컨트롤 혹은 AutoComplete 컨트롤의 selectedItem 속성 값을 지정하는 사용자 정의 함수 onSelectedIndexChanged 를 선언합니다.
  5. ComboBox 컨트롤 혹은 AutoComplete 컨트롤에서 특정 항목을 선택 시 호출 되는 selectedIndexChanged 이벤트를 함수 onSelectedIndexChanged 로 지정합니다.


- TreeView 검색 (Vue)

- 자동완성 (Vue)

- selectedItem API 문서


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


감사합니다


그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

VueJS Re: TreeView에서 Scroll 이동 문의

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

페이지 정보

작성자 Adps 작성일 2022-09-13 14:51 댓글 0건

본문

첨부파일

  1. TreeView 컨트롤를 생성합니다.
  2. 생성된 TreeView 컨트롤에 바인딩 된 데이터를 가공하는 _getSearchList 사용자 정의 함수를 선언합니다.
  3. _getSearchList 함수를 통해 가공한 데이터를 이용하여 ComboBox 컨트롤과 AutoComplete 컨트롤을 생성합니다.
  4. TreeView 컨트롤의 selectedItem 속성 값을 초기화 후, ComboBox 컨트롤 혹은 AutoComplete 컨트롤의 selectedItem 속성 값을 지정하는 사용자 정의 함수 onSelectedIndexChanged 를 선언합니다.
  5. ComboBox 컨트롤 혹은 AutoComplete 컨트롤에서 특정 항목을 선택 시 호출 되는 selectedIndexChanged 이벤트를 함수 onSelectedIndexChanged 로 지정합니다.

답변을 캡처와 같이 적용시켜 보았지만 select는 되어도 스크롤 이동이 되지 않습니다. css에 따로 변경한게 있는지 알수 있을까요?

댓글목록

등록된 댓글이 없습니다.

VueJS Re: TreeView에서 Scroll 이동 문의

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

페이지 정보

작성자 GCK다이애나 작성일 2022-09-13 17:32 댓글 0건

본문

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


먼저 원하시는 답변을 드리지 못해 죄송합니다.

전달해드린 샘플에 지정된 CSS 는 다음과 같습니다.

.container-fluid .wj-control {
  margin-bottom: 6px;
}

.container-fluid .wj-treeview {
  display: block;
  font-size: 120%;
  height: 300px;
  width: 500px;
  margin-bottom: 8px;
  padding: 6px;
  background: #f0f0f0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

body {
  margin-bottom: 24pt;
}

혹시 Treeview 컨트롤의 height 속성이 지정 안되어 있지 않으신가요?

Treeview 컨트롤의 경우 height 속성을 CSS 로 설정하여 스크롤 바를 생성 할 수 있습니다.

만약 해당 속성이 지정되어 있지 않으시다면, 아래의 코드를 이용해 보시기 바랍니다.

.container-fluid .wj-treeview {
  height: 300px;
}


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


감사합니다


그레이프시티 드림


댓글목록

등록된 댓글이 없습니다.

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