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

HorizontalLayout 멀티 Columns 시 width 설정 > Q&A | 토론

본문 바로가기

DataViewJS

Q&A | 토론

PureJS HorizontalLayout 멀티 Columns 시 width 설정

페이지 정보

작성자 holymoly 작성일 2024-03-07 12:40 조회 33회 댓글 0건
제품 버전 : 11.0.0

본문

var headerPresenter =    '<div style="text-align:center;"><img class="tv-image" src={{=it.image}} /><p style="white-space: normal;">{{=it.description}}</p></div>'; var startPresenter =  '<div class="stars-box {{=it.starsIcon}}"></div>';

var cols = [   {     id:  'header',     caption:  '',     dataField:  'image,description',     presenter: headerPresenter,     cssClass:  'gc-column-header-cell-depth-1',     width:  220,   },   {     id:  'brand',     caption:  'Brand',     columns: [         {id: 'aa', caption:  'AA', dataField:  'aa'},         {id: 'bb', caption:  'BB', dataField:  'bb'}     ],     width:  "*"   },   {     id:  'price',     caption:  'Price',     dataField:  'price',     format:  '$#,##',   },   {     id:  'size',     caption:  'Size (inches)',     dataField:  'size',   },   {     id:  'refreshRate',     caption:  'RefreshRate (Hz)',     dataField:  'refreshRate',   },   {     id:  'resolution',     caption:  'Resolution',     dataField:  'resolution',   },   {     id:  'starsIcon',     caption:  'Stars',     dataField:  'starsIcon',     presenter: startPresenter,   }, ]; var layout =  new  GC. DataViews. HorizontalLayout({   colHeaderHeight:  150,   colWidth:  30,   rowHeight:  280,   selectionUnit:  'cell',   showRowHeader:  false, }); new  GC. DataViews. DataView(document.getElementById( 'grid'), data, cols, layout);  // focus data.view by default

document.getElementById( 'grid').focus();


안녕하세요. 상기 데모 코드로 실행 시 다중 컬럼을 적용 했을 때, colHeaderHeight 값으로 설정한 컬럼 width 값이 개별 컬럼마다 적용이 되는데 하위 컬럼이 존재할 경우 따로따로 width 값을 설정 할 수 있는 방법은 없나요? 


기본 GridLayout 사용시에는 컬럼별로 width 값을 설정하면 적용되지만, Horizontal Layout을 사용할 경우 Height 값으로 변경되어서 width 값을 설정할 수가 없습니다

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

댓글목록

등록된 댓글이 없습니다.

2 답변

PureJS Re: HorizontalLayout 멀티 Columns 시 width 설정

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

페이지 정보

작성자 MESCIUS루카스 작성일 2024-03-11 10:28 댓글 3건

본문

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


아래의 샘플 코드와 샘플을 참고하여 설정해 보시기 바랍니다.

....
{ 
    id: 'brand', 
    caption: 'Brand', 
    columns: [
      {
        id: 'aa', 
        caption: 'AA', 
        dataField: 'aa',
        width: 220
      }, 
      { 
        id: 'bb', 
        caption: 'BB', 
        dataField: 'bb',
        width: 50
      }
    ], 
    width: "*" 
  }, 
....


[프리미엄 회원 전환 안내]

라이선스를 보유하고 계신다면, 누구나 추가 비용 없이 메시어스 포럼 프리미엄 회원이 될 수 있습니다.

프리미엄 회원으로 전환 시, 기술 문의에 대하여 우선 지원 받으실 수 있습니다.

아래 링크를 통해 프리미엄 회원 전환 방법 및 혜택 안내를 살펴보시길 바랍니다.

MESCIUS 개발자 포럼 | 프리미엄 회원 전환 방법 및 혜택 안내


감사합니다.

메시어스 드림

댓글목록

holymoly님의 댓글

holymoly 작성일

잘못 이해하신것 같습니다 제목에도 적었듯이 개별 height 값을 설정하고 싶은 것이 아니라 width 값을 다르게 설정하고 싶다는 뜻입니다. 답변주신 내용은 위의 질문 내용에서도 참조사항으로 적어둔 내용이고 개별 행 높이값을 설정하는 예시입니다. 

MESCIUS루카스님의 댓글의 댓글

MESCIUS루카스 작성일

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

위와 같이 사용 시에는 컬럼이 누워있는 형태이기 때문에 코드 상에서 볼 수 있듯이, 헤더의 세로 높이가 width 값이 됩니다.
이러한 연유로 제대로 커뮤니케이션이 되지 않은 것 같습니다.
혼란을 드려 죄송합니다.

결과적으로 원하시는 것은, 위 샘플에서 "Brand" 헤더의 가로 너비와 "AA", "BB" 헤더의 가로 너비를 다르게 설정하고 싶다는 말씀이 맞으실까요?
확인해 주시면 다시 한 번 방법 확인 후 답변 드리겠습니다.

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

holymoly님의 댓글

holymoly 작성일

네 말씀주신 내용이 맞습니다 BRAND헤더와 AA 헤더의 너비를 다르게 설정하고 싶습니다.

PureJS Re: HorizontalLayout 멀티 Columns 시 width 설정

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

페이지 정보

작성자 MESCIUS루카스 작성일 2024-03-18 16:26 댓글 0건

본문

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


본사 개발팀으로 해당 내용 확인해 보았으나,

DataViewsJS에서는 말씀하신 부분을 각각 다르게 설정할 수 있는 API는 지원하고 있지 않다고 합니다.

추후 해당 기능을 제공할 수 있을 지에 대해 본사 개발팀 쪽으로 추가 요청은 해 놓았으나, DataViewsJS 제품은 현재 단종 되어 더 이상 유지보수가 되고 있지 않기 때문에 기능 추가가 쉽지는 않아 보입니다

혹여나 추후 기능이 추가된다면, 한 번 더 안내 드리도록 하겠습니다.


도움을 드리지 못해 죄송합니다.


[프리미엄 회원 전환 안내]

라이선스를 보유하고 계신다면, 누구나 추가 비용 없이 메시어스 포럼 프리미엄 회원이 될 수 있습니다.

프리미엄 회원으로 전환 시, 기술 문의에 대하여 우선 지원 받으실 수 있습니다.

아래 링크를 통해 프리미엄 회원 전환 방법 및 혜택 안내를 살펴보시길 바랍니다.

MESCIUS 개발자 포럼 | 프리미엄 회원 전환 방법 및 혜택 안내


감사합니다.

메시어스 드림

댓글목록

등록된 댓글이 없습니다.

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

인기글

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