안녕하세요 메시어스입니다.
문의하신 내용에 대해 답변드립니다.
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}
>- getMergedRange API 문서
- topRow API 문서
- bottomRow API 문서
관련 API 문서를 공유드리며 다른 궁금한 점이 생기면 문의주시기 바랍니다.
감사합니다.
메시어스 드림
작성일 2023-12-08 12:47 조회 125회
댓글 0건
2 답변
