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);
    }
}