ReactJS 그리드 컨텍스트 메뉴 + 영역선택 + 체크 박스 + formatItem 을 같이 사용할 경우 발생하는 문제 문의
페이지 정보
작성자 토끼바람
작성일 2021-08-19 12:44 조회 3,925회
댓글 0건
본문
관련링크
컨텍스트 메뉴 샘플
(https://demo.grapecity.co.kr/wijmo/learn-wijmo/Grid/ContextMenus/react)
영역선택 메뉴 샘플
https://demo.grapecity.co.kr/wijmo/learn-wijmo/Grid/Selection/Overview/react
체크 박스 메뉴 샘플
https://demo.grapecity.co.kr/wijmo/learn-wijmo/Grid/Selection/CheckboxSelection/react
이렇게 3가지의 샘플을 두고 컨텍스트 메뉴를 구현 하였는데요
컨텍스트 메뉴가 있으면 영역 선택을 하는 동작이 정상적으로 동작되지 않고 있습니다.
-------------------------
그리드 설정
--------------------------
<FlexGrid
headersVisibility="All" // All None, Column Row
autoGenerateColumns={false}
showSelectedHeaders={"All"}
anchorCursor={true}
alternatingRowStep={0}
showMarquee={true} // 헤더 그룹 표시여부
allowPinning={"ColumnRange"} // 컬럼 고정 방식
allowSorting={'MultiColumn'} // 정렬 방식
selectionMode="MultiRange" // 영역 선택
mergeManager={new GridUserMerge()} // 셀 병합처리
isReadOnly={true} // 읽기 전용 여부
columnGroups={gridColGroup} // 그리드 포멧
itemsSource={gridBodyData} // 바인딩할 데이터
initialized={initGrid} // 그리드 초기 이벤트 및 등록 처리
formatItem={gridFormatItem} // 헤더 및 데이터 표시 항식
ref={gridObejctRef} // 그리드 ref 지정
>
<FlexGridFilter />
</FlexGrid>
---------------------------------
그리드 초기화설정
---------------------------------
setGridObject(sender);
// 컬럼 헤더 높이를 고정한다.
sender.columnHeaders.rows.defaultSize = 35;
// 체크 박스가 있는 경우 컨텍스 메뉴에서 영역선택은 되지 않는다.
// 왜 그러지?
new GridContextMenu(sender);
/*
// 체크 박스 생성
selector = new Selector(sender, {
itemChecked: (s, e) => {
}
});
// 컬럼 체크 박스 생성
selector.column = sender.rowHeaders.columns[0];
*/
}
------------------------
컨텍스트 메뉴 클릭시 동작
------------------------
executeCommand: (cmd) => {
let view = grid.collectionView, cols = grid.columns, col = cols[grid.selection.col], sd = view.sortDescriptions, gd = view.groupDescriptions;
switch (cmd) {
case 'ALL_RANGE':
grid.selection = new CellRange(0, 0, grid.rows.length-1, cols.length-1);
break;
case 'COL_RANGE':
grid.selection = new CellRange(0, col.index, grid.rows.length-1, cols.index);
break;
default:
break;
}
// restore focus to active grid cell (TFS 439964)
grid.refresh();
let sel = grid.selection, cell = grid.cells.getCellElement(sel.row, sel.col);
if (cell) {
cell.focus();
}
}
-----------------------------------------
formatItem 함수
-----------------------------------------
const gridFormatItem =(sender, eventObject)=>{
if (eventObject.panel === sender.columnHeaders) {
eventObject.cell.innerHTML = ComUtils.UnEscapeHtml(eventObject.cell.innerHTML); //eventObject.cell.textContent;
}
if (eventObject.panel === sender.cells) {
let col = sender.columns[eventObject.col];
let eventColumnName = col.binding;
let orgSource = sender.rows[eventObject.row].dataItem;
if (eventColumnName && eventColumnName!=="fromSubsidiaryName" && eventColumnName!=="companyCode" && eventColumnName!=="divisionName"){
let elValue = orgSource[eventColumnName];
if (elValue){
if (elValue!==-999){
if (elValue <90){
sender.setCellData(eventObject.row,eventObject.col,"rkrkrk");
}
else{
sender.setCellData(eventObject.row,eventObject.col,elValue);
}
}
else{
sender.setCellData(eventObject.row,eventObject.col,"");
}
}
else{
sender.setCellData(eventObject.row,eventObject.col,"-");
}
}
if (eventColumnName && eventColumnName.indexOf("dfrRate") > -1){
let signalValue = orgSource["dfrColor" + eventColumnName.replace("dfrRate", "")];
if (signalValue){
switch(signalValue.toUpperCase()){
case "RED":
wijmo.addClass(eventObject.cell,'red-signal')
break;
case "YELLOW":
wijmo.addClass(eventObject.cell,'yellow-signal')
break;
case "GREEN":
wijmo.addClass(eventObject.cell,'green-signal')
break;
default:
break;
}
}
}
}
}
----------------------------------------------------------------------------
1. 체크박스가 있는 상태에서 컨텍스트 메뉴로 컬럼 선택, 전체 선택등을 동작하려면 어떠한 설정이 필요한것인지
아니면 버그가 있는것인지 문의합니다.
2. formatItem 으로 설정한 경우 체크 박스가 동작되지 않습니다.
소스에 어떤 문제가 있는것일까요?? 어떻게 처리가 가능한지 문의 합니다.
댓글목록
등록된 댓글이 없습니다.
1 답변
