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

그리드 동적 header 추가 > Q&A | 토론

본문 바로가기

PureJS 그리드 동적 header 추가

페이지 정보

작성자 팬더곰 작성일 2023-08-16 14:11 조회 527회 댓글 0건
제품 버전 : 5.20231.888

본문

안녕하세요.  

아래와 같이 그리드 생성한 후 ,버튼을 클릭하면 동적으로 grid header를 추가하는 방법을 문의드립니다.


// create Sum grid

theGridSum = new wijmo.grid.FlexGrid('#theGridSum', {

allowMerging: "All",

columnGroups: getColumnGroupTab1(),

isReadOnly:true,

alternatingRowStep: 0,

selectionMode: wijmo.grid.SelectionMode.MultiRange,

itemsSource: new wijmo.collections.CollectionView([], {

groupDescriptions: []

}),

});


function getColumnGroupTab1() {

   ...  

  data.push(

{ header: 'TT1', align:'center', 

columns: [

  { header: 'LIPAS', align:'center', 

  columns: [  { binding:'F', header:'F'},  ]

  },

  { header: 'Plan', align:'center',

  columns: [

  { binding:'A', header:'Total'},

  { binding:'B', header:'Within LIPAS'},

  { binding:'C', header:'Out of LIPAS'},

  { binding:'D', header:'W GC Contrib'},

  { binding:'E', header:'Next W Contrib'},

  ]

  },

]

},

{ header: 'TT2', align:'center', 

columns: [

{ binding: 'G', header: 'G'},

{ binding: 'H', header: 'H'},

{ binding: 'I', header: 'I'},

]

},

  );

  

  reutrn data;

);

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

댓글목록

등록된 댓글이 없습니다.

2 답변

PureJS Re: 그리드 동적 header 추가

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

페이지 정보

작성자 GCK루시 작성일 2023-08-16 16:12 댓글 2건

본문

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


문의하신 기능을 구현하기 위해서는 ColumnGroup 객체를 생성 및 FlexGrid의 columns 컬렉션에 push하여 추가해 주시면 됩니다. 다만 columnHeader에 여러 행이 설정되어있을 경우, 별도로 header text를 setCellData로 설정해주셔야 합니다.


  document.getElementById("add").addEventListener("click", (e) => {
    // 열 추가
    theGrid.columns.push(new wijmo.grid.ColumnGroup( { binding: 'test', header: 'test_two', width: 150,allowMerging: true }))
    // 텍스트 설정
    theGrid.columnHeaders.setCellData(0,theGrid.columns.length-1,"test_two")
    theGrid.columnHeaders.setCellData(1,theGrid.columns.length-1,"test_two")
  });


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


감사합니다.

그레이프시티 드림

댓글목록

팬더곰님의 댓글

팬더곰 작성일

header에 컬럼을 추가하는게 아닌,  row를 추가하려고 합니다. 
여러줄의 header를 생성한 후, 버튼 클릭 시 별도의 header row를 추가하려고 하는데, 
theGrid.columnHeaders.rows.push(new wijmo.grid.Row())
로 해보니 잘 안되어, 문의드립니다.

GCK루시님의 댓글의 댓글

GCK루시 작성일

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

해당 문의는 현재 확인 중에 있으며 업데이트 되는대로 안내드릴 수 있도록 하겠습니다.

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

PureJS Re: 그리드 동적 header 추가

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

페이지 정보

작성자 GCK루시 작성일 2023-08-18 11:39 댓글 0건

본문

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


먼저 ColumnGroups 행 컬렉션에 Row 객체를 추가하면 셀이 생성되지 않아 동작하지 않게 됩니다. 기능 구현을 위해서는 FlexGrid에 행 추가 후 헤더 행과 같은 역할을 할 수 있도록 사용자 지정해주시기 바랍니다.


자세한 코드는 아래 샘플을 참고하여 주시기 바랍니다.



위 방법 이외에 요구사항에 따라 추가 행이 포함되도록 ColumnGroups 정의를 수정하고 새 ColumnGroups 정의를 FlexGrid에 재할당하는 방법이 있으니 참고 부탁드립니다.


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


감사합니다.

그레이프시티 드림


댓글목록

등록된 댓글이 없습니다.

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