React 그리드 편집
Ignite UI for React 일괄 업데이트를 통해 셀 및 행 편집을 지원합니다. 참고로 이는 현재 템플릿이 아닌 열로 제한됩니다.
React Grid Editing Example
개요
React 데이터 그리드에서의 편집은 React 그리드의 editMode
옵션을 사용하여 구성됩니다. 이 속성은 아래 나열된 세 가지 옵션을 사용합니다.
None
: 편집이 활성화되지 않습니다.Cell
: 셀이 편집 모드로 들어가고 편집 모드 종료 시 값을 커밋할 수 있도록 허용합니다.CellBatch
: 셀이 편집 모드로 들어갈 수 있도록 허용하지만 변경 사항은 커밋될 때까지 나중에 캐시됩니다.Row
: 행이 편집 모드로 들어가고 종료 시 값을 커밋하도록 허용합니다.
CellBatch
로 설정된 경우 변경 사항을 커밋하려면 그리드에서 commitEdits
메서드를 수행해야 합니다. 그리드는 셀이 커밋될 때까지 셀을 기울임꼴로 표시하여 변경 사항을 데이터 소스에 다시 푸시할 시기를 제어합니다.
또한 onCellValueChanging
이벤트를 연결하고 새 값이 커밋되기 전에 검사하여 오류 처리를 수행할 수 있습니다. 그리드는 오류 메시지를 출력할 수 있는 setEditError
메소드를 노출합니다. 유효한 값이 입력될 때까지 셀이 편집 모드로 유지됩니다. 그렇지 않으면 유효하지 않은 값을 되돌리기 위해 그리드의 rejectEdit
메소드를 수행할 수 있습니다. 유효하지 않은 값이 발견되지 않으면 그리드의 acceptEdit
메소드를 호출하여 변경 사항을 커밋할 수도 있습니다.
후킹을 통해 그리드 수준에서 커밋을 승인하거나 거부할 수 있습니다. onDataCommitting
를 통해 acceptCommit
또는 rejectCommit
전달하는 메소드 commitID
이벤트 인수를 매개변수로 사용합니다. 이 이벤트는 또한 changes
커밋되기 전에 모든 수정 사항을 저장하는 컬렉션입니다. 예를 들어 커밋이 추가, 업데이트 또는 삭제 작업에서 발생했는지 확인할 수 있습니다. TransactionType
에 노출된 부동산 changes
수집하고 수행합니다. acceptCommit
또는 rejectCommit
필요할 땐.
Excel Style Editing
editOnKeyPress
사용하면 Excel의 작동 방식과 유사하게 입력할 때 즉시 편집을 시작할 수 있습니다. 또한 editModeClickAction
속성을 SingleClick
으로 설정하면 사용자가 다른 셀을 탐색하는 동안 셀을 빠르게 편집할 수 있습니다. 기본적으로 편집 모드로 들어가려면 두 번 클릭해야 합니다.
Code Snippet
다음은 데이터 그리드 편집 및 데이터 커밋을 구성하는 방법을 보여줍니다.
<IgrDataGrid
height="100%"
width="100%"
activationMode="Cell"
editMode="CellBatch" >
</IgrDataGrid>
<button onClick={this.onCommitClick}>Commit Data</button>
import { IgrDataGrid } from 'igniteui-react-grids';
onCommitClick = () => {
this._grid.commitEdits();
}
Undo/Redo batch changes
다음은 일괄 업데이트가 활성화된 동안 변경 사항을 되돌리는 방법을 보여줍니다.
<IgrDataGrid
height="100%"
width="100%"
activationMode="Cell"
editMode="CellBatch" >
</IgrDataGrid>
<button disabled={!this.canUndo} onClick={this.onUndoClick}>Undo</button>
<button disabled={!this.canRedo} onClick={this.onRedoClick}>Redo</button>
import { IgrDataGrid } from 'igniteui-react-grids';
onUndoClick = () => {
this._grid.undo();
// request a new render so the undo/redo buttons update.
this.setState({ });
}
onRedoClick = () => {
this._grid.redo();
// request a new render so the undo/redo buttons update.
this.setState({ });
}
Error Validation and Commit Integrity
다음은 편집 모드를 종료할 때 셀이 비어 있는지 확인하고 업데이트된 셀의 커밋만 수락하여 오류를 통합하는 방법을 보여줍니다.
<IgrDataGrid
height="100%"
width="100%"
dataSource={this.data}
activationMode="Cell"
cellValueChanging={this.onCellValueChanging}
dataCommitting={this.onDataCommitting}>
</IgrDataGrid>
import { IgrGridDataCommittingEventArgs } from 'igniteui-react-grids';
import { TransactionType } from 'igniteui-react-core'
onCellValueChanging = (s: IgrDataGrid, e: IgrGridCellValueChangingEventArgs) => {
//check if value is empty upon exiting edit mode.
if (e.newValue === "") {
s.setEditError(e.editID, "Error, cell is empty");
//or revert changes
s.rejectEdit(e.editID);
}
else {
s.acceptEdit(e.editID);
}
}
onDataCommitting = (s: IgrDataGrid, e: IgrGridDataCommittingEventArgs) => {
if (e.changes[0].transactionType === TransactionType.Update) {
//commit was passed
s.acceptCommit(e.commitID);
}
else{
//commit was prevented
s.rejectCommit(e.commitID);
}
}
API References
CellBatch
editModeClickAction
editMode
SingleClick
TransactionType