[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

Web Components 그리드 편집

Ignite UI for Web Components 데이터 테이블/데이터 그리드는 일괄 업데이트를 통한 셀 및 행 편집을 지원합니다. 이는 현재 템플릿이 없는 열로 제한됩니다.

Web Components Grid Editing Example

개요

Editing in the Web Components data grid is configured by using the editMode option of the Web Components grid. This property takes three different options, listed below:

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

다음은 데이터 그리드 편집 및 데이터 커밋을 구성하는 방법을 보여줍니다.

<button id="clickCommit">Commit</button>
<igc-data-grid id="grid"
    height="100%"
    width="100%"
    activation-mode="Cell"
    edit-mode="Cell">
</igc-data-grid>

import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids';

this.onCommitClick = this.onCommitClick.bind(this);

public onCommitClick() {
    this.grid.commitEdits();
}

Undo/Redo batch changes

다음은 일괄 업데이트가 활성화된 동안 변경 사항을 되돌리는 방법을 보여줍니다.

<igc-data-grid id="grid"
      height="100%"
      width="100%"
      activation-mode="Cell"
      edit-mode="Cell">
</igc-data-grid>
<button id="undoClick" disabled="true">Undo</button>
<button id="redoClick" disabled="true">Redo</button>

import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids';

public onUndoClick() {
    this.grid.undo();
    if (this.grid.editMode === EditModeType.CellBatch && this.redo !== null)
    {
        this.redo.disabled = false;
    }
}

public onRedoClick() {
    this.grid.redo();
}

Error Validation and Commit Integrity

다음은 편집 모드를 종료할 때 셀이 비어 있는지 확인하고 업데이트된 셀의 커밋만 수락하여 오류를 통합하는 방법을 보여줍니다.

<igc-data-grid
    id="grid"
    height="calc(100% - 50px)"
    width="100%"
    activation-mode="Cell"
    selection-mode="SingleRow"
    default-column-min-width="125"
    is-column-options-enabled="true"
    auto-generate-columns="false"
    edit-mode="Cell">

import { IgcGridDataCommittingEventArgs } from 'igniteui-webcomponents-data-grids';
import { TransactionType } from 'igniteui-webcomponents-core'

this.onCellValueChanging = this.onCellValueChanging.bind(this);
this.grid.cellValueChanging = this.onCellValueChanging;

this.onDataCommitting = this.onDataCommitting.bind(this);
this.grid.dataCommitting = this.onDataCommitting;


public onCellValueChanging (s: IgcDataGridComponent, e: IgcGridCellValueChangingEventArgs) {
    if (s.editMode === EditModeType.CellBatch && this.undo !== null)
    {
        this.undo.disabled = false;
    }

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

public onDataCommitting (s: IgcDataGridComponent, e: IgcGridDataCommittingEventArgs) {
    if (e.changes[0].transactionType === TransactionType.Update) {
        //commit was passed
        s.acceptCommit(e.commitID);
    }
    else{
        //commit was prevented
        s.rejectCommit(e.commitID);
    }
}