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

    Overview

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

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

    ​CellBatch로 설정된 경우 변경 사항을 커밋하려면 그리드에서 commitEdits 메서드를 수행해야 합니다. 그리드는 셀이 커밋될 때까지 셀을 기울임꼴로 표시하여 변경 사항을 데이터 소스에 다시 푸시할 시기를 제어합니다.

    또한 onCellValueChanging 이벤트를 연결하고 새 값이 커밋되기 전에 검사하여 오류 처리를 수행할 수 있습니다. 그리드는 오류 메시지를 출력할 수 있는 setEditError 메소드를 노출합니다. 유효한 값이 입력될 때까지 셀이 편집 모드로 유지됩니다. 그렇지 않으면 유효하지 않은 값을 되돌리기 위해 그리드의 rejectEdit 메소드를 수행할 수 있습니다. 유효하지 않은 값이 발견되지 않으면 그리드의 acceptEdit 메소드를 호출하여 변경 사항을 커밋할 수도 있습니다.

    ​commitID 이벤트 인수를 매개변수로 전달하는 acceptCommit 또는 rejectCommit 메소드를 통해 onDataCommitting 연결하여 그리드 수준에서 커밋을 승인하거나 거부할 수 있습니다. 이 이벤트는 또한 커밋되기 전에 모든 수정 사항을 저장하는 changes 컬렉션을 노출합니다. 예를 들어 changes 컬렉션에 노출된 TransactionType 속성을 통해 커밋이 추가, 업데이트 또는 삭제 작업에서 발생했는지 확인하고 필요한 경우 acceptCommit 또는 rejectCommit 수행할 수 있습니다.

    Excel Style Editing

    EditOnKeyPress 사용하면 Excel의 작동 방식과 유사하게 입력할 때 즉시 편집을 시작할 수 있습니다. 또한 EditModeClickAction 속성을 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