React Grid Row Editing

    O recurso Ignite UI for React Edição de Linha no React Grid permite editar dados diretamente no IgrGrid. Além dessa maneira conveniente de manipular dados, há uma API poderosa para operações CRUD completas. Você pode executar a edição da linha da grade clicando em uma linha e pressionando a tecla Enter. Outra maneira rápida é clicar duas vezes com o mouse na linha que precisa ser modificada.

    React Grid Row Editing Example

    O exemplo a seguir demonstra como habilitar a edição de linha no IgrGrid. Alterar um valor de célula e, em seguida, clicar ou navegar para outra célula na mesma linha não atualizará o valor da linha até que seja confirmado usando o botão Concluído ou descartado usando o botão Cancelar.

    [!Note] When a row is in edit mode, clicking on a cell in another row will act like the "Done" button is pressed, submitting all changes made in the previous row. If the newly focused cell is editable, the new row enters edit mode as well. However, if the cell is not editable, only the previous row exits edit mode.

    Row Editing Usage

    Defina uma fonte de IgrGrid dados com limite e rowEditable defina como true:

    function unitsInStockCellTemplate(ctx: IgrCellTemplateContext) {
    return (
        <>
            <input name="units" value={ctx.dataContext.cell.value} style={{color: "black"}} />;
        </>
    );
}

<IgrGrid primaryKey="ProductID" width="100%" height="500px" rowEditable="true"
    bodyTemplate={unitsInStockCellTemplate}>
    <IgrColumn field="ProductID" header="Product ID" editable="false"></IgrColumn>
    <IgrColumn field="ReorderLevel" header="ReorderLever" dataType="number"></IgrColumn>
    <IgrColumn field="ProductName" header="ProductName" dataType="string"></IgrColumn>
    <IgrColumn field="UnitsInStock" header="UnitsInStock" dataType="number"></IgrColumn>
    <IgrColumn field="OrderDate" dataType="date"></IgrColumn>
    <IgrColumn field="Discontinued" header="Discontinued" dataType="boolean"></IgrColumn>
</IgrGrid>

    [!Note] Setting primary key is mandatory for row editing operations.

    [!Note] Enabling editing for individual columns is not necessary. Using the rowEditable property in the IgrGrid, all rows, with defined field property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the editable input of that column to false.

    [!Note] The IgrGrid utilizes BaseTransactionService - an internal provider that holds pending cell changes until the row state is either submitted or cancelled.

    Positioning

    • A posição padrão da sobreposição será abaixo da linha que está no modo de edição

    • Se não houver espaço abaixo da linha, a sobreposição aparecerá acima da linha.

    • Uma vez mostrado - superior ou inferior, a sobreposição manterá essa posição durante a rolagem, até que a sobreposição seja fechada.

    Behavior

    • Se a linha estiver no modo de edição, a edição continuará, se uma célula da mesma linha for clicada.

    • Clicar no botão "Concluído" concluirá a edição da linha e enviará alterações para a fonte de dados ou para uma transação, se disponível. Além disso, a linha sairá do modo de edição.

    • Clicar no botão "Cancelar" reverterá todas as alterações atuais na linha e a linha sairá do modo de edição.

    • Se a linha estiver no modo de edição, clicar em uma célula de outra linha concluirá a edição da linha atual e enviará novas alterações de linha (o mesmo comportamento clicando no botão "Concluído"). Se a nova célula que recebe o foco for editável, a nova linha também entrará no modo de edição, enquanto se a célula não for editável, apenas a linha anterior sairá do modo de edição.

    • Se a linha estiver no modo de edição e IgrGrid for rolada para que a linha saia da área visível, esta ainda estará no modo de edição. Quando IgrGrid for rolado, para que a linha fique visível novamente, a linha ainda estará no modo de edição. Quando clicado fora do IgrGrid, a célula também permanecerá no modo de edição.

    • Ao realizar operações de classificação, filtragem, pesquisa e ocultação, reverterá todas as alterações atuais na linha e a linha sairá do modo de edição.

    • Ao executar operações de paginação, redimensionamento, fixação e movimentação, sairá do modo de edição e enviará o valor mais recente.

    • Cada célula modificada recebe o estilo editado até que a edição da linha seja concluída. Este é o comportamento, quando IgrGrid não é fornecido com transações. Quando as transações estão disponíveis - o estilo de edição da célula é aplicado até que todas as alterações sejam confirmadas.

    Keyboard Navigation

    • Enter e F2 entram no modo de edição de linha

    • Esc sai do modo de edição de linha e não envia nenhuma alteração de célula feita enquanto a linha estava no modo de edição.

    • Tab move o foco de uma célula editável na linha para a próxima e da célula editável mais à direita para os botões CANCEL e DONE. A navegação do botão DONE vai para a célula editável mais à esquerda dentro da linha editada no momento.

    Feature Integration

    • Qualquer operação de alteração de dados encerrará as operações de edição de linha e enviará as alterações de linha atuais. Isso incluirá operações como classificação, alteração de critérios de agrupamento e filtragem, paginação, etc.

    • Os resumos serão atualizados após a conclusão da edição da linha. O mesmo é válido para os outros recursos, como classificação, filtragem, etc.

    • Expandir e recolher linhas agrupadas não encerrará a edição da linha atual.

    Customizing Row Editing Overlay

    Customizing Text

    É possível personalizar o texto da sobreposição de edição de linha por meio de modelos.

    A propriedade RowChangesCount é exposta e contém a contagem das células alteradas.

    function rowEditTextTemplate(ctx: IgrGridRowEditTextTemplateContext) {
    return (
        <>
            Changes: {ctx.dataContext.implicit}
        </>
    );
}

    Customizing Buttons

    Também é possível personalizar os botões da sobreposição de edição de linhas por meio de modelos.

    function rowEditActionsTemplate(ctx: IgrGridRowEditActionsTemplateContext) {
    const endRowEdit = ctx.dataContext.implicit;
    return (
        <>
            <button onClick={(event) => endRowEdit(false, event)}>Cancel</button>
            <button onClick={(event) => endRowEdit(true, event)}>Apply</button>
        </>
    );
}

    Styling

    Além dos temas predefinidos, a grade pode ser ainda mais personalizada ao definir algumas das propriedades CSS disponíveis. Caso você queira alterar algumas das cores, precisa definir uma classe para a grade primeiro:

    <IgrGrid className="grid"></IgrGrid>

    Em seguida, defina as propriedades CSS relacionadas para essa classe:

    .grid {
    --ig-banner-banner-background: #e3e3e3;
    --ig-banner-banner-message-color: #423589;
}

    Demo

    Known Issues and Limitations

    • Quando a grade não tiver nenhuma primaryKey configuração e os cenários de dados remotos estiverem habilitados (ao paginar, classificar, filtrar, rolar solicitações de gatilho para um servidor remoto para recuperar os dados a serem exibidos na grade), uma linha perderá o seguinte estado após a conclusão de uma solicitação de dados:
    • Seleção de linha
    • Expandir/recolher linha
    • Edição de linha
    • Fixação de linha

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.