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

TreeGrid indent 스타일 > Q&A | 토론

본문 바로가기
로그인

로그인후 이용해주세요

아직 회원이 아니신가요?

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

Wijmo

Q&A | 토론

VueJS TreeGrid indent 스타일

페이지 정보

작성자 죠이러버
프로필 보기 쪽지 보내기
작성일 2021-09-29 21:25 조회 4,469회 댓글 0건
제품 버전 : 5.20211.781
컨트롤 이름 : FlexGrid

본문

Wijmo의 TreeGrid 를 이용하려고 하는데 트리의 들여쓰기 방식이 이상합니다.

아래 사진은 현재 보여지고 있는 방식인데요.



다섯번째 줄의 20-10-10-10 과

여섯번째 줄의 20-10-10-10 은 같은 레벨인데 하위에 child가 있냐 없냐에 따라 마치 다른레벨처럼 보이도록 들여쓰기가 됩니다.


이것을 아래와 같이 들여쓰기를 변경하고 싶습니다.
 



이렇게 하려면 어떻게 해야 하나요? 

글로 설명하자면 트리펼치는 삼각형이 없는 노드들을 더 들여쓰고 싶습니다.


답변 부탁드립니다.

감사합니다.


추가) 사실 아래와 같이 기존 component one 의 c# 버전 flexgrid 의 트리그리드 모양을 사용하고 싶은데 혹시 방법이 있나요?


 


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

댓글목록

등록된 댓글이 없습니다.

5 답변

VueJS Re: TreeGrid indent 스타일

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

페이지 정보

작성자 GCK루시
프로필 보기 쪽지 보내기
작성일 2021-09-30 14:56 댓글 1건

본문

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


Wijmo의 treeGrid의 indentation 설정을 위해서 서로 다른 레벨의 행 그룹의 간격을 띄우는데 사용되는 indent를 가져오거나 설정하는 treeIndent 속성을 아래와 같이 사용해보시기 바랍니다.


<wj-flex-grid
      (....)
      :treeIndent="32"
      :initialized="initGrid"
    >
</wj-flex-grid>


treeIndent : https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_grid.flexgrid.html#treeindent


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


감사합니다. 

그레이프시티 드림 


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


댓글목록

죠이러버님의 댓글

죠이러버
프로필 보기 쪽지 보내기
작성일

답변 주신대로 treeIndent 를 적용했을 때 얼핏 잘 맞는것처럼 보였는데

잘 확인해보니 여전히 트리를 펼치는 삼각형이 있는 (즉 Child가 있는) 항목과 Child가 없는 같은 형제노드가 같은 선상에 있지 않습니다. 아래 댓글 참고해주시고 답변 부탁드립니다.

VueJS Re: TreeGrid indent 스타일

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

페이지 정보

작성자 죠이러버
프로필 보기 쪽지 보내기
작성일 2021-09-30 15:54 댓글 0건

본문

답변 주신대로 treeIndent 를 적용했을 때 얼핏 잘 맞는것처럼 보였는데

잘 확인해보니 여전히 트리를 펼치는 삼각형이 있는 (즉 Child가 있는) 항목과 Child가 없는 같은 형제노드가 같은 선상에 있지 않습니다. (아래 그림 참고)


6170d376ce3098806a6ecd92b4a0604f_1632983812_5555.png
treeIndent 값을 더 키우면 저 차이가 더 커질뿐입니다.


tree를 펼치는 삼각형이 없는 노드만 더 우측으로 밀어야 하는 상황입니다.

아래그림의 왼쪽이 현재 상태이고 오른쪽이 되어야 될 모습 입니다.


6170d376ce3098806a6ecd92b4a0604f_1632984601_58.png   6170d376ce3098806a6ecd92b4a0604f_1632984610_8877.png


즉, 트리를 펼치는 삼각형의 크기만큼 그게 없는 노드를 오른쪽으로 밀어야 정상적으로 보일 것 같습니다.

오른쪽과 같이 표기가 안되면 부모자식의 구분이 불가능합니다.

확인 부탁드립니다.



댓글목록

등록된 댓글이 없습니다.

VueJS Re: TreeGrid indent 스타일

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

페이지 정보

작성자 GCK루시
프로필 보기 쪽지 보내기
작성일 2021-10-01 09:45 댓글 0건

본문

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


먼저 불편함을 끼친 점 죄송합니다.

그리드는 실제 Tree 컨트롤 아니므로 Padding을 다르게 계산하며 이를 해결하기 위해서는 그리드의 formatItem을 사용하시면 됩니다. 자세한 코드는 아래 샘플을 참고하여 주시기 바랍니다.




[formatItem]

https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_grid.flexgrid.html#formatitem 


​도움말 문서도 같이 전달 드리오니 참고 부탁 드립니다. 


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


감사합니다. 

그레이프시티 드림 


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



댓글목록

등록된 댓글이 없습니다.

VueJS Re: TreeGrid indent 스타일

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

페이지 정보

작성자 죠이러버
프로필 보기 쪽지 보내기
작성일 2021-10-01 14:47 댓글 0건

본문

보내주신 코드의 formatItem 코드가 다음과 같은데요.


formatItem: function (s, e) {
... 중략 ....
if (row.hasChildren && row.level) {
var curPadding = e.cell.style.paddingLeft.match(/^\d+/)[0] || 0;
e.cell.style.paddingLeft = Number(curPadding) - 23 + "px";
} else if (!row.level && !row.hasChildren) {
var curPadding = e.cell.style.paddingLeft.match(/^\d+/)[0] || 0;
e.cell.style.paddingLeft = Number(curPadding) + 23 + "px";
}
},


위에서 else if 구문이 !row.level 조건때문에 동작을 안하더라구요.

그리고 첫번째 if 구문으로 인해서 root 노드와 바로 다음 child 가 같은 레벨인것처럼 보입니다.

6170d376ce3098806a6ecd92b4a0604f_1633066874_9623.png
 

그래서 첫번째 if 구문을 제거하고 else if 구문에서 !row.level 조건을 삭제 해서

부모가 없는 노드를 우측으로 23px 밀어내는 방식으로 해봤거든요.

그리고 제쪽 코드에서는 주신대로 그대로 하면 스크립트 오류가 나서요.

조건문에  && e.cell.style.paddingLeft 이걸 추가해서 최종 코드를 다음과 같이 해서 잘되는거 확인했는데요.


    formatItem: function(s, e) {
      if (e.panel.cellType != wjcGrid.CellType.Cell) {
        return;
      }
      var curPadding;
      let row = e.panel.rows[e.row];

      if (!row.hasChildren && e.cell.style.paddingLeft) {
        // 오류가 나서 조건 추가
        curPadding = e.cell.style.paddingLeft.match(/^\d+/)[0] || 0;
        e.cell.style.paddingLeft = Number(curPadding) + 23 + "px";
      }
    },


이렇게 !row.level 조건을 빼도 문제가 없을지 궁금합니다. !row.level 이 조건의 의미가 궁금합니다.

해결방법 찾아주셔서 감사드리구요. 위 질문에 대한 답변 부탁드립니다.

감사합니다.



댓글목록

등록된 댓글이 없습니다.

VueJS Re: TreeGrid indent 스타일

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

페이지 정보

작성자 GCK루시
프로필 보기 쪽지 보내기
작성일 2021-10-05 09:54 댓글 0건

본문

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


Wijmo GroupRow의 level 속성은 GroupRow와 연결된 그룹의 계층 레벨을 가져오거나 설정합니다. !row.level은 최상단 즉, 부모가 없는 노드인 경우를 나타내며(최상단일 경우, row.level이 0) 아래의 코드는 최상단이며 자식 노드가 없는 경우의 조건을 나타냅니다.

if (!row.level && !row.hasChildren) { 


자식 노드가 없는 최상단 노드에 대해 별도 처리가 필요 없으신 경우, 변경하신 코드를 사용하셔도 무방할 것으로 생각됩니다.


[level]

https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_grid.grouprow.html#level 


도움말 문서를 전달 드리오니 참고 부탁 드립니다.

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


감사합니다. 

그레이프시티 드림 


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

댓글목록

등록된 댓글이 없습니다.

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

카테고리

인기글

더보기

최신글

더보기

셀럽

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