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

그리드 header 내 콤보박스 > Q&A | 토론

본문 바로가기

ReactJS 그리드 header 내 콤보박스

페이지 정보

작성자 jaylee 작성일 2024-04-19 15:38 조회 54회 댓글 0건
제품 버전 : 5.20241.9
컨트롤 이름 : wijmo

본문

안녕하세요.

위즈모 그리드 헤더 컬럼 내 combobox 설정하는 방법 문의드립니다.


//헤더 영역
const getSecondsGridHeaders = () => [
{
binding: 'changeTypecd',
header: printGridColumnLabel('adjust'),
align: 'center',
width: 100,
// visible: true,
format: 's',
isReadOnly: true
},
{
binding: 'productseqSeqno1',
header: printGridColumnLabel('SER1'),
align: 'center',
// visible: true,
format: 's',
width: 70,
isReadOnly: true
}
]
//그리드 영역
<FlexGrid
initialized={initSecondGrid}
itemsSource={secondGridData}
deferResizing={true}
alternatingRowStep={0}
showMarquee={true}
headersVisibility="All"
showSelectedHeaders="All"
autoGenerateColumns={false}
columnGroups={hook.getFirstGridHeaders()}
isReadOnly={true}
allowMerging="All"></FlexGrid>
  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

3 답변

ReactJS Re: 그리드 header 내 콤보박스

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

페이지 정보

작성자 MESCIUS루시 작성일 2024-04-22 13:52 댓글 0건

본문

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


문의하신 내용의 경우, 사용자 정의 셀을 설정할 수 있는 formatItem 이벤트를 이용하여 ComboBox 컨트롤 생성 및 원하는 열 헤더에 넣어 구현할 수 있습니다.


자세한 코드는 아래 샘플에서 확인할 수 있습니다.



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


감사합니다.

메시어스 드림


댓글목록

등록된 댓글이 없습니다.

ReactJS Re: 그리드 header 내 콤보박스

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

페이지 정보

작성자 jaylee 작성일 2024-04-22 15:03 댓글 0건

본문

안녕하세요.

자세한 답변 감사드립니다.


혹시 체크박스도 동일하게 사용하면 될까요?

댓글목록

등록된 댓글이 없습니다.

ReactJS Re: 그리드 header 내 콤보박스

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

페이지 정보

작성자 MESCIUS루시 작성일 2024-04-23 10:32 댓글 0건

본문

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


문의하신 내용의 경우, 사용자 정의 셀을 설정할 수 있는 formatItem 이벤트를 이용하여 checkbox 요소 추가 및 그리드 hostElement에 클릭 이벤트를 추가하여 체크박스 상태를 변경할 수 있습니다.


아래 코드를 참고하여 주시기 바랍니다.


  let isChecked = true;

  const gridInitial = useEvent((grid) => {
    grid.formatItem.addHandler((s, e) => {
      if (e.panel == s.columnHeaders) {
        if (e.col === 0) {
          var checkbox = document.createElement('input');
          checkbox.type = 'checkbox';
          checkbox.checked = isChecked;

          e.cell.append(checkbox);
        }
      }
    });

    grid.hostElement.addEventListener('click', function (e) {
      var ht = grid.hitTest(e); //지정된 포인트에 대한 정보를 포함하는 wijmo.grid.HitTestInfo 개체를 가져
	//클릭한 영역이 열헤더이며 인덱스 0이고 체크박스이면
      if (ht.cellType === 2 && ht.col === 0 && ht.target.type === 'checkbox') {
	//체크박스 상태 변경
        isChecked = !isChecked;
      }
    });
  });


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


감사합니다.

메시어스 드림

댓글목록

등록된 댓글이 없습니다.

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