React Grid Row Adding

    The Ignite UI for React Row Adding feature in React Grid enables users to input and submit new data records without navigating to a separate form or page. With the IgrGrid, users can manipulate data through inline row adding and a powerful API for CRUD operations. Add an IgrActionStrip component with editing actions enabled in the grid's template. After that hover a row and use the provided button. Finally press ALT + + to spawn the row adding UI.

    React Grid Row Adding Example

    Row Adding Usage

    Depois, defina umIgrGrid com a fonte de dados vinculada,rowEditable definido como verdadeiro e umIgrActionStrip componente com ações de edição ativadas. OaddRow input controla a visibilidade do botão que gera a linha de interface adicionada.

    <IgrGrid autoGenerate={false} data={NwindData} primaryKey="ProductID" rowEditable={true}>
    <IgrColumn field="ProductID" header="Product ID" dataType="number"></IgrColumn>
    <IgrColumn field="ReorderLevel" header="Reorder Level" dataType="number"></IgrColumn>
    <IgrColumn field="ProductName" header="Product Name" dataType="string"></IgrColumn>
    <IgrColumn field="UnitsInStock" header="Units In Stock" dataType="number"></IgrColumn>
    <IgrColumn field="OrderDate" header="Order Date" dataType="date"></IgrColumn>
    <IgrColumn field="Discontinued" header="Discontinued" dataType="boolean"></IgrColumn>

    <IgrActionStrip>
        <IgrGridEditingActions addRow={true}></IgrGridEditingActions>
    </IgrActionStrip>
</IgrGrid>

    Observação: a configuração da chave primária é obrigatória para operações de adição de linha.

    Nota: Todas as colunas, exceto a chave principal, podem ser editadas na linha que adiciona a interface por padrão. Se você quiser desativar a edição para uma coluna específica, então precisa definir aeditable entrada da coluna parafalse.

    Nota: OIgrGridEditingActions input que controla a visibilidade do botão de adicionar linha pode usar o contexto action strip (que é do tipoIgrRowType para ajustar finamente qual registro o botão mostra).

    O internoBaseTransactionService é fornecidogrid automaticamente. Ele mantém as mudanças pendentes de célula até que o estado da linha seja submetido ou cancelado.

    Start Row Adding Programmatically

    gridpermite gerar programaticamente a interface de adicionar linha usando dois métodos públicos diferentes. Uma que aceita um ID de linha para especificar a linha sob a qual a interface deve surgir e outra que funciona por índice. Você pode usar esses métodos para gerar a interface em qualquer lugar dentro da visualização de dados atual. Alterar a página ou especificar uma linha que, por exemplo, é filtrada não é suportado.

    UsarbeginAddRowById exige que você especifique a linha a ser usada como contexto para a operação por itsRowID (PK). O método então funciona como se o usuário final tivesse clicado no botão de adicionar linha para a linha especificada, gerando a interface sob ela. Você também pode fazer a interface aparecer como a primeira fileira da grade passandonull pelo primeiro parâmetro.

    gridRef.current.beginAddRowById('ALFKI');  // Spawns the add row UI under the row with PK 'ALFKI'
gridRef.current.beginAddRowById(null);     // Spawns the add row UI as the first record

    ObeginAddRowByIndex método funciona de forma semelhante, mas exige que você especifique o índice onde a interface deve aparecer. Os valores permitidos variam entre 0 e o tamanho da visualização de dados - 1.

    gridRef.current.beginAddRowByIndex(10);   // Spawns the add row UI at index 10
gridRef.current.beginAddRowByIndex(0);    // Spawns the add row UI as the first record

    Positioning

    • A posição padrão da interface do usuário de adição de linha está abaixo da linha para a qual o usuário final clicou no botão adicionar linha.

    • Osgrid rolos para exibir completamente a interface de adicionar linha automaticamente.

    • A sobreposição para a interface do usuário de adição de linha mantém sua posição durante a rolagem.

    Behavior

    A interface do usuário de adição de linha tem o mesmo comportamento que a de edição de linha, pois foi projetada para fornecer uma experiência de edição consistente aos usuários finais. Consulte o tópico Edição de linha de grade para obter mais informações.

    Após uma nova linha ser adicionada através da interface de adicionar linha, sua posição e/ou visibilidade é determinada pelo estado de ordenação, filtragem e agrupamento dogrid. Em umgrid que não tem nenhum desses estados aplicado, aparece como o último registro. Uma barra de lanche é exibida brevemente, contendo um botão que o usuário final pode usar para deslizargrid até sua posição caso não esteja à vista.

    Keyboard Navigation

    • ALT + +- Entra no modo de edição para adicionar uma linha

    • ESC sai do modo de adição de linha sem enviar nenhuma alteração

    • TAB mova 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 CANCELAR e CONCLUÍDO. A navegação do botão CONCLUÍDO vai para a célula editável mais à esquerda dentro da linha editada no momento.

    Feature Integration

    • Qualquer operação de adição de linha será interrompida se a visualização de dados dogrid for modificada. Quaisquer alterações feitas pelo usuário final são enviadas. Operações que alteram a visão de dados incluem, mas não se limitam a, ordenação, agrupamento, filtragem, paginação, etc.

    • Os resumos são atualizados após a conclusão da operação de adição de linha. O mesmo é válido para os outros recursos dependentes da visualização de dados, como classificação, filtragem etc.

    Customizing Row Adding Overlay

    Customizing Text

    Personalizar o texto da linha adicionando sobreposição é possível usando orowAddTextTemplate.

    gridRef.current.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => {
    return (
        <>
            <span>Adding Row</span>
        </>
    );
}

    Styling

    A interface de adicionar linhas inclui os botões nasIgrActionStrip ações de edição, os editores de edição e a sobreposição, além da barra de lanche, que permite aos usuários finais rolar até a linha recém-adicionada. Para estilizar esses componentes, você pode consultar estes guias completos em seus respectivos temas:

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.