ReactJS 그리드 병합 관련
페이지 정보
작성자 MESCIUSMAN 작성일 2023-12-08 12:47 조회 149회 댓글 0건본문
관련링크
댓글목록
등록된 댓글이 없습니다.
등록된 댓글이 없습니다.
안녕하세요 메시어스입니다.
문의하신 내용 중 병합된 셀 클릭시 배경색 변경 처리와, rowHeader 클릭 시 값을 가져오는 기능의 경우, 현재 확인 중에 있으면 업데이트가 되는대로 안내드리도록 하겠습니다.
다만 class형 컴포넌트 데모를 functional 컴포넌트로 단순하게 변환처리하는 문의의 경우 Wijmo 기능이라기 보다는 일반적인 React 사용 방법에 대한 문의로 확인됩니다. 이전에 안내드린 것과 같이 Wijmo Q&A 게시판은 Wijmo를 통해 개발을 하시는 중에 생기는 문의사항에 대해 처리하는 게시판입니다.
따라서 이전에 Functional 컴포넌트로 드렸던 샘플을 참고하셔서 변환 작업을 하시길 바라며 진행하시는 중에 Wijmo와 관련되어 문제가 발생하는 경우에 저희 쪽으로 문의주시면 확인 후, 도움을 드릴 수 있도록 하겠습니다.
감사합니다.
메시어스 드림
등록된 댓글이 없습니다.
안녕하세요 메시어스입니다.
문의하신 내용에 대해 답변드립니다.
1. 병합된 셀 클릭시 해당 행의 배경색 변경 처리하는 방법
=> 해당 기능을 구현하기 위해서는 selectionChanged 이벤트를 사용하여 현재 항목의 병합 범위에 있는 모든 행에 선택사항을 업데이트 처리해주시면 됩니다. 아래 소스 코드를 참고하여 주시기 바랍니다.
function initialized(s) { //select any cell to trigger 'selectionChanged' initially setTimeout(() => { s.select(new wjGrid.CellRange(1, 0)); }); } function selectionChangedHandler(s, e) { var mergedRange = s.getMergedRange(s.cells, e.row, 0); var mainRow = getFirstRow(e.row, mergedRange.rowSpan); var rng = new wjGrid.CellRange( mainRow, 0, mainRow + mergedRange.rowSpan - 1, s.columns.length ); if (rng.equals(s.selection)) { return; } s.select(rng); } function getFirstRow(row, range) { return row - (row % range); } (...) <wjcGrid.FlexGrid allowMerging="All" itemsSource={source} selectionChanged={selectionChangedHandler} initialized={initialized} mergeManager={new RestrictedMergeManager()} // 병합 처리 allowSorting={false} >
다만 해당 기능을 적용할 경우, 편집과 같은 FlexGrid의 일부 기능이 제거됩니다. 이는 편집할 셀을 클릭할 때마다 selectionChanged 핸들러가 실행되고 그리드가 편집 모드로 전환되지 않도록 새로운 셀을 다시 선택하기 때문입니다. 해당 내용에 대해 업무에 참고 부탁 드립니다.
2. rowHeader 클릭 시 병합된 셀의 행만큼의 특정 열의 값을 가져오는 기능
=> 해당 기능의 경우, FlexGrid hostElement에 click 이벤트를 추가한 뒤, row header 클릭 시 getMergedRange 메서드를 통해 병합된 셀 영역의 정보를 가져온 뒤, 반복문을 통해 값을 가져오시기 바랍니다. 아래 간단한 코드를 참고하여 주시기 바랍니다.
function initialized(s) { s.hostElement.addEventListener("click", function (e) { var ht = s.hitTest(e); if (ht.cellType === 3) { //column의 인덱스는 merged 셀이 있는 곳으로 설정 var mergedCell = s.getMergedRange(s.cells, ht.row, ht.col); var testArr = []; for (var i = mergedCell.topRow; i <= mergedCell.bottomRow; i++) { testArr.push(s.rows[i].dataItem.product); } console.log(testArr); } }); } (...) <wjcGrid.FlexGrid allowMerging="All" itemsSource={source} initialized={initialized} mergeManager={new RestrictedMergeManager()} allowSorting={false} >
관련 API 문서를 공유드리며 다른 궁금한 점이 생기면 문의주시기 바랍니다.
감사합니다.
메시어스 드림