[!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.

Blazor 그리드 편집

Ignite UI for Blazor 일괄 업데이트로 셀 및 행 편집을 지원합니다. 참고로, 이는 현재 템플릿이 없는 열로 제한됩니다.

Blazor Grid Editing Example

개요

Blazor 데이터 그리드에서의 편집은 Blazor 그리드 옵션을 사용하여EditMode 구성됩니다. 이 부동산은 아래에 나열된 세 가지 옵션을 제공합니다:

None: 편집이 활성화되어 있지 않습니다.
Cell: 셀이 편집 모드에 진입할 수 있게 하고, 편집 모드에서 종료할 때 값을 커밋합니다.
CellBatch: 셀이 편집 모드에 들어가지만, 변경 사항은 커밋될 때까지 캐시됩니다.
Row: 행이 편집 모드에 들어가고 종료 시 값을 커밋할 수 있도록 허용합니다.

로CellBatch 설정하면, 변경을 커밋하려면 그리드에서 메서드를commitEdits 수행해야 합니다. 그리드는 셀이 커밋될 때까지 이탤릭체로 표시하여 언제 변경 사항을 데이터소스로 돌려볼지 제어할 수 있게 합니다.

또한, 이벤트 후킹onCellValueChanging을 통해 새로운 값을 검사하여 오류 처리를 수행할 수 있습니다. 그리드는 오류 메시지를 출력할 수 있는 메서드를setEditError 노출합니다. 이 방법은 유효한 값이 입력될 때까지 셀을 편집 모드로 유지합니다. 그렇지 않으면 그리드의 메서드를rejectEdit 수행해 무효 값을 되돌릴 수 있습니다. 유효한 값이 없다면, 그리드의 메서드를acceptEdit 호출하여 변경사항을 커밋할 수도 있습니다.

커밋은 또는 메서드를 훅onDataCommittingacceptCommit으로rejectCommit 진행하며 이벤트 인자를 매개변수로 전달commitID 하여 그리드 레벨에서 승인 또는 거부할 수 있습니다. 이 이벤트는 또한 커밋 전에 모든 수정을 저장하는 컬렉션을 드러냅changes 니다. 예를 들어, 커밋이 추가, 업데이트, 삭제 작업에서 온 것인지 컬렉션에 노출TransactionType 된changes 속성을 통해 확인할 수 있고, 필요 시 또는acceptCommit 작업을 수행할rejectCommit 수 있습니다.

Excel Style Editing

EditOnKeyPressExcel처럼 타이핑할 때 즉시 편집을 시작할 수 있습니다. 추가로 다음 설정을 할 수 있습니다EditModeClickAction property를SingleClick 사용자가 다른 셀로 이동하면서 셀을 빠르게 편집할 수 있도록 하기 위함입니다. 기본적으로 편집 모드에 들어가려면 더블 클릭이 필요합니다.

Code Snippet

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

<IgbDataGrid Height="100%" Width="100%" @ref="DataGridRef"
    DataSource="DataSource"
    EditMode="EditModeType.CellBatch" />
<button @onclick="OnCommitClick">Commit Data</button>

@code {
    public IgbDataGrid DataGridRef;

    private void OnCommitClick(MouseEventArgs e)
    {
        this.DataGridRef.CommitEdits();
    }
}

Undo/Redo batch changes

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

<IgbDataGrid Height="100%" Width="100%" @ref="DataGridRef"
    DataSource="DataSource"
    EditMode="EditModeType.CellBatch" />
<button @onclick="OnUndoClick">Undo</button>
<button @onclick="OnRedoClick">Redo</button>

@code {
    public IgbDataGrid DataGridRef;

    private void OnUndoClick(MouseEventArgs e)
    {
        this.DataGridRef.Undo();
    }

    private void OnRedoClick(MouseEventArgs e)
    {
        this.DataGridRef.Redo();
    }
}

Error Validation and Commit Integrity

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

<IgbDataGrid Height="100%" Width="100%"
    @ref="DataGridRef"
    CellValueChanging="OnCellValueChanging"
    DataCommitting="OnDataCommitting">
 </IgbDataGrid>

@code {
    public IgbDataGrid DataGridRef;

    public void OnCellValueChanging(IgbGridCellValueChangingEventArgs e)
    {
        //check if value is empty upon exiting edit mode.
        if (e.NewValue == "")
        {
            this.DataGridRef.SetEditError(e.EditID, "Error, cell is empty");
            //or revert changes
            this.DataGridRef.RejectEdit(e.EditID);
        }
        else
        {
            this.DataGridRef.AcceptEdit(e.EditID);
        }
    }

    public void OnDataCommitting(IgbGridDataCommittingEventArgs e)
    {
        if (e.Changes[0].TransactionType == TransactionType.Update)
        {
            //commit was passed
            this.DataGridRef.AcceptCommit(e.CommitID);
        }
        else
        {
            //commit was prevented
            this.DataGridRef.RejectCommit(e.CommitID);
        }
    }
}

API References

CellBatch
EditModeClickAction
EditMode
SingleClick
TransactionType