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 값을 설정 할 수 있는 방법은 없나요? 

개별 행으로 표현되는 헤더 별로, columns로 설정할 수 있는 헤더 Depth 별로 넓이값을 다르게 주고 싶다는 의미입니다.

깊이가 3단계로 이루어진 column header의 경우 대분류 50, 중분류 100, 소분류 150, 으로 각각 넓이를 다르게 표현 할 수 있는지요?

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