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

    Edição de grade Blazor

    A Tabela de Dados/Grade de Dados do Ignite UI for Blazor oferece suporte à edição de células e linhas com atualização em lote. Observe que, no momento, isso está limitado a colunas sem modelo.

    Blazor Grid Editing Example

    Visão geral

    A edição na grade de dados Blazor é configurada usando a EditMode opção da grade Blazor. Esta propriedade tem três opções diferentes, listadas abaixo:

    • None: A edição não está habilitada.
    • Cell: Permitir que as células entrem no modo de edição e confirmem o valor ao sair do modo de edição.
    • CellBatch: Permite que as células entrem no modo de edição, mas as alterações serão armazenadas em cache posteriormente até que sejam confirmadas.
    • Row: Permitir que as linhas entrem no modo de edição e confirmem o valor ao sair.

    Quando definido como CellBatch, para confirmar as alterações, você deve executar o commitEdits método da grade. A grade colocará as células em itálico até que elas sejam confirmadas, fornecendo controle sobre quando enviar as alterações de volta para a fonte de dados.

    Além disso, o tratamento de erros pode ser realizado conectando o evento onCellValueChanging e inspecionando novos valores antes que eles sejam confirmados. A grade expõe um método setEditError que pode gerar uma mensagem de erro. Isso mantém a célula no modo de edição até que um valor válido seja inserido. Caso contrário, o método rejectEdit da grade pode ser realizado para reverter o valor inválido. Se nenhum valor inválido for encontrado, você também pode confirmar suas alterações chamando o método acceptEdit da grade.

    Os commits podem ser aprovados ou recusados no nível onDataCommitting da grade conectando por meio dos acceptCommit métodos or rejectCommit passando o argumento event commitID como o parâmetro. Esse evento também expõe uma changes coleção que armazena todas as modificações antes de serem confirmadas. Por exemplo, você pode verificar se uma confirmação foi de uma operação de adição, atualização ou exclusão por meio da TransactionType propriedade exposta na changes coleção e executar um acceptCommit ou rejectCommit quando necessário.

    Excel Style Editing

    EditOnKeyPress permite que você comece a editar instantaneamente ao digitar de forma semelhante ao comportamento do Excel. Além disso, você pode definir a EditModeClickAction propriedade como SingleClick para permitir que os usuários editem células rapidamente enquanto navegam para outras células. Por padrão, é necessário clicar duas vezes para entrar no modo de edição.

    Code Snippet

    A seguir, demonstramos como configurar a edição na grade de dados e confirmar os dados.

    <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

    A seguir, demonstramos como reverter alterações enquanto a atualização em lote está habilitada.

    <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

    O seguinte demonstra como incorporar erros verificando se as células estão vazias ao sair do modo de edição e aceitando confirmações provenientes apenas de células atualizadas.

    <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