React Grid 편집

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

editOnKeyPressExcel처럼 타이핑할 때 즉시 편집을 시작할 수 있습니다. 추가로 다음 설정을 할 수 있습니다editModeClickAction property를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-data-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-data-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-data-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);
    }
}