ReactJS FlexGrid Cell 내용 삭제, 행높이 자동 적용, 셀 변경내용 비교 관련 문의
페이지 정보
작성자 jaylee
작성일 2024-05-23 09:33 조회 92회
댓글 1건
본문
관련링크
1. Cell 내용 삭제기능 문의
- FlexGrid option
alternatingRowStep={0}
showMarquee={true}
headersVisibility={HeadersVisibility.All}
autoGenerateColumns={false}
showSelectedHeaders={HeadersVisibility.None}
allowDragging={AllowDragging.None}
allowSorting={AllowSorting.None}
allowResizing={AllowResizing.ColumnsAllCells}
autoRowHeights={true}
selectionMode={'CellRange'}
- del키를 눌러 Cell 내용 삭제 시 Cell의 dataType이 Number인 Cell의 내용이 삭제 되지 않습니다.
ㄴ Row selected시키고 삭제하면 삭제 됨
- 기 내용이 존재하는 Row의 selected가 되어있지 않고 내용이 없는 빈행 추가 하고 빈행을 selected시켰을 때 beginningEdit Handler를 수행하지 않음...
ㄴ 이 역시도 기 내용이 존재하는 행을 selected 시키고 del키를 눌렀을 시 beginningEdit Handler 를 수행하면서 정상 로직 수행
● 행추가 로직
const gridRows = grid.rows
const addedRow = new Row({})
gridRows.insert(gridRows.length, addedRow)
addedRow.isSelected = true
grid?.refresh(true)
● Cell 내용삭제 로직
: 삭제 기능의 경우 del키 입력시 기본적으로 selected된 Row의 내용이 삭제되어서 custom 해서 사용중입니다.
beginningEdit Handler 에서 deleteKeyInHandler 호출 하여 사용 하고 있습니다.
const getCellRange = (grid: FlexGridInstance): CellRange[] => {
return grid.selectedRanges
}
const getSelectedCellRangeIndex = (
grid: FlexGridInstance
): {start: {row: number; col: number}; end: {row: number; col: number}} => {
const selectedRng: CellRange[] = getCellRange(grid)
return {
start: {
row:
selectedRng[0]._row2 > selectedRng[0]._row
? selectedRng[0]._row
: selectedRng[0]._row2,
col:
selectedRng[0]._col2 > selectedRng[0]._col
? selectedRng[0]._col
: selectedRng[0]._col2
},
end: {
row:
selectedRng[0]._row > selectedRng[0]._row2
? selectedRng[0]._row
: selectedRng[0]._row2,
col:
selectedRng[0]._col > selectedRng[0]._col2
? selectedRng[0]._col
: selectedRng[0]._col2
}
}
}
const deleteKeyInHandler = (
grid: FlexGridInstance,
e: CellRangeEventArgs,
init?: {
Object: Object
String: string
Number: number
Boolean: boolean
Date: string
Array: []
}
) => {
if (e.data.key === 'Delete') {
e.cancel = true
const defaultInitData = init || {
Object: null,
String: '',
Number: 0,
Boolean: false,
Date: moment.now(),
Array: []
}
const selectedRng = getSelectedCellRangeIndex(grid)
const startRow = selectedRng.start.row
const endRow = selectedRng.end.row
const startCol = selectedRng.start.col
const endCol = selectedRng.end.col
for (let r = startRow; r <= endRow; r++) {
for (let c = startCol; c <= endCol; c++) {
if (grid.cells.columns.getColumn(c).isVisible) {
switch (grid.cells.columns.getColumn(c).dataType) {
case DataType.Number:
grid.setCellData(r, c, defaultInitData.Number)
break
case DataType.String:
grid.setCellData(r, c, defaultInitData.String)
break
case DataType.Boolean:
grid.setCellData(r, c, defaultInitData.Boolean)
break
case DataType.Date:
grid.setCellData(r, c, defaultInitData.Date)
break
case DataType.Array:
grid.setCellData(r, c, defaultInitData.Array)
break
case DataType.Object:
grid.setCellData(r, c, defaultInitData.Object)
}
}
}
}
}
}
2. 행 높이 자동 적용 문의
- 그리드의 설정은 1번 문의 내용과 동일합니다.
- cell 내의 input의 갯수가 늘어났을때 행의 높이가 자종 조절되게 하고 싶습니다.
내용 :
formatItem 을 이용해서 셀 안에 Html input 컴포넌트를 넣고
const cellElement = e.cell
cellElement.appendChild(HTMLInputElement)
input 내에서 엔터 입력시 input을 하나씩 추가하는 기능을 개발했습니다.
input..addEventListener('keyup', function (ev: KeyboardEvent) {
if(ev.code === 'Enter' || ev.code === 'NumpadEnter'){
... cellElement 에 input을 추가하는 로직
}
}
input을 추가시 행 높이가 자동으로 늘어 나야 하는데 테스트 결과 아래와 같은 문제가 발생했습니다.
case1. collectionview를 아래처럼 refresh를 했을 시 그리드가 갱신이 되면서 행높이 조절이 자동으로 되는데 추가한 행이 삭제 되는 현상이 발생 합니다.
grid.collectionView.refresh() : collection에 item이 grid의 Rows와 갯수가 달라서 나는 현상 같음....
case2. collectionview를 refresh를 하지 않았을 때 그리드가 갱신이 되지 않아서 행의 높이가 조절 되지 않습니다.
당연히 추가된 행은 삭제지도 않습니다.
input 추가 이벤트 후 다른 Cell의 내용을 편집 후 에 행 높이가 조절이 됩니다.
3. 변경전 데이터 비교
- cell의 변경 전 과 후 데이터를 비교하고 싶습니다.
변경 전 데이터 비교를 위해 다음과 같은 로직으로 oldVal과 newVal을 가져와
비교해 보았더니 내용이 같았습니다.
CollectionView 의 초기화(new CollectionView(itemsSource)) 시점은 initializedGrid와 itemsSource의 변경 시점입니다.
const oldVal = grid.getCellData(e.row, e.col, false)
let newVal = ''
if (grid.activeEditor) {
newVal = grid.activeEditor.value
} else {
newVal = grid.activePanel.getCellData(e.row, e.col, false)
}
감사합니다.
댓글목록
MESCIUS엘라님의 댓글
MESCIUS엘라
작성일
1 답변
