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

TreeGrid 의 트리 제어 기능을 중간 컬럼에서 사용하고 싶은데 방법이 있을까요? > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

VueJS TreeGrid 의 트리 제어 기능을 중간 컬럼에서 사용하고 싶은데 방법이 있을까요?

페이지 정보

작성자 죠이러버 작성일 2021-10-01 10:54 조회 3,464회 댓글 0건
제품 버전 : 5.20211.781
컨트롤 이름 : FlexGrid

본문

TreeGrid 를 아래 그림과 같이 맨앞 컬럼이 아닌 원하는 중간 컬럼에서 펼치고 축소하는 제어가 가능하도록 설정이 가능한가요? (아래 그림은 다른 제품 데모화면을 캡처하였습니다.)

위즈모에서 해보려고 했는데 제가 잘 몰라서 그런지 안되서요. 답변 부탁드립니다.


 

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

댓글목록

등록된 댓글이 없습니다.

5 답변

VueJS Re: TreeGrid 의 트리 제어 기능을 중간 컬럼에서 사용하고 싶은데 방법이 있을까요?

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

페이지 정보

작성자 GCK루시 작성일 2021-10-01 15:32 댓글 0건

본문

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



Wijmo 트리 그리드에서 기존 열의 collpase/expand 아이콘은 기본적으로 0번째 열로 설정되므로 해당 아이콘의 위치를 이동시키기 위해서는 기존 아이콘을 삭제 후, FlexGrid의 formatItem 이벤트를 통해 원하시는 열에 추가하시면 됩니다. 자세한 코드는 아래 샘플에서 확인하실 수 있습니다.




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


감사합니다. 

그레이프시티 드림 


* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.

댓글목록

등록된 댓글이 없습니다.

VueJS Re: TreeGrid 의 트리 제어 기능을 중간 컬럼에서 사용하고 싶은데 방법이 있을까요?

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

페이지 정보

작성자 죠이러버 작성일 2021-10-05 15:59 댓글 1건

본문

답변 감사합니다.


알려주신 방법에서 아래 코드에 대해 문의가 있는데요.


let html =
"" +
'<button class="wj-btn wj-btn-glyph wj-elem-collapse" tabindex="-1" aria-label="Toggle Group">' +
'<span class="' +
(row.isCollapsed ? "wj-glyph-right" : "wj-glyph-down-right") +
'">' +
"</span>" +
"</button>" +
row.dataItem.name +
"";



여기서 row.dataItem.name 을 넣게 되어 있는데 이부분이 row.dataItem.name 대신 row.dataItem.productId 등 가변적인 항목이 될 수가 있어서요.

row.dataItem 대신 원래 해당 cell에 들어가야 할 값을 지정하는 다른 방법이 있을 것 같은데 잘 못 찾겠어서 문의드립니다.


답변 부탁드립니다.



댓글목록

GCK루시님의 댓글

GCK루시 작성일

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

현재 Wijmo 기술 문의가 급증하여 순차적으로 답변 드리고 있습니다. 
앞선 기술 문의에 대해서 처리 후, 최대한 빠르게 답변 드릴 수 있도록 하겠습니다.

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

VueJS Re: TreeGrid 의 트리 제어 기능을 중간 컬럼에서 사용하고 싶은데 방법이 있을까요?

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

페이지 정보

작성자 GCK루시 작성일 2021-10-07 14:58 댓글 0건

본문

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


문의 주신 내용이 해당 셀의 값을 dataItem이 아닌 다른 속성을 통해 값을 가져오고 설정하고 싶으시다는 말씀이실까요? 만일 맞으시다면 formatItem 이벤트의 두 번째 인자 값에서 포맷된 그리드 셀을 나타내는 요소에 대한 참조를 가져오는 cell 속성을 이용하시면 됩니다. 해당 속성에서 textContent를 통해 그리드 셀의 값을 가져오실 수 있습니다. 자세한 코드는 아래에서 확인 가능하십니다. 


formatItem :function (s,e){
  (...)
  var content = e.cell.textContent;
  (...)
  let html =
  "" +
  '<button class="wj-btn wj-btn-glyph wj-elem-collapse" 
  tabindex="-1" aria-label="Toggle Group">' +
  '<span class="' + (row.isCollapsed ? "wj-glyph-right" : "wj- 
  glyph-down-right") +'">' + "</span>" +  "</button>" +  
  content  
  + "";


[cell]

https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_grid.formatitemeventargs.html#cell 


도움말 문서를 같이 전달 드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.  


감사합니다. 

그레이프시티 드림 



* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.

댓글목록

등록된 댓글이 없습니다.

VueJS Re: TreeGrid 의 트리 제어 기능을 중간 컬럼에서 사용하고 싶은데 방법이 있을까요?

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

페이지 정보

작성자 죠이러버 작성일 2021-10-07 16:56 댓글 0건

본문

안녕하세요 매번 답변 감사드립니다.


답변주신 방식으로 formatItem을 활용했을 때 다 잘되는데 최종적으로

grid.autoSizeColumns();

이 코드를 어느 시점에 수행해야 할지를 잘 모르겠습니다.


기존에 아래와 같이

:loadedRows="onLoadedRows"


onLoadedRows 함수 내에서 grid.autoSizeColumns() 를 수행해왔는데요.

formatItem 을 통해 트리가 구성되는 컬럼위치를 바꾸니

해당 컬럼 크기가 자동 조절이 잘 안됩니다.

grid 항목 선택 시 grid.autoSizeColumns() 를 명시적으로 재 수행하면 잘 동작하는데요.

formatItem 이 잘 적용된 후 grid.autoSizeColumns() 를 자동으로 수행하도록 처리하고 싶은데 어떻게 하면 되는지 답변 부탁드립니다.

감사합니다.



댓글목록

등록된 댓글이 없습니다.

VueJS Re: TreeGrid 의 트리 제어 기능을 중간 컬럼에서 사용하고 싶은데 방법이 있을까요?

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

페이지 정보

작성자 GCK루시 작성일 2021-10-08 17:42 댓글 1건

본문

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


autoSizeColumns 실행과 관련하여 혹시 별도로 열의 너비를 설정한 코드가 있는지 확인 부탁 드립니다. 만일 별도로 열에 대한 width 설정 코드가 없으시고 지속적으로 해당 이슈가 발생할 시 아래 샘플과 비교하여 문제 원인으로 파악되는 부분과 함께 재현 및 디버깅이 가능한 샘플을 공유해주신다면 재현 및 디버깅 후, 답변 드릴 수 있도록 하겠습니다.



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


감사합니다. 

그레이프시티 드림 


* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.



댓글목록

GCK루시님의 댓글

GCK루시 작성일

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

문의와 관련하여 추가적인 회신 사항이 없어 완료 처리 되었습니다.
추가적인 문의 사항이 있으신 경우, 원활한 답변을 위해 새로운 Q&A 글을 생성하여 주시기 바랍니다.

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

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