React Tree Grid Row Adding

O IgrTreeGrid fornece uma maneira conveniente de realizar manipulações de dados por meio da adição de linha embutida e uma API poderosa para operações CRUD React. Adicione um IgrActionStrip componente com ações de edição habilitadas no modelo da grade, passe o mouse sobre uma linha e use o botão fornecido, pressione ALT + + para gerar a linha adicionando a interface do usuário ou ALT + SHIFT + + para gerar a interface do usuário para adicionar um filho para a linha selecionada.

React Tree Grid Row Adding Example

Row Adding Usage

Em seguida, defina uma fonte de IgrTreeGrid dados com vinculação, rowEditable definida como true e um IgrActionStrip componente com ações de edição habilitadas. A addRow entrada controla a visibilidade do botão que gera a linha que adiciona a interface do usuário.

<IgrTreeGrid autoGenerate={false} primaryKey="ID" foreignKey="ParentID" rowEditable={true}>
    <IgrColumn field="Name" header="Name" dataType="string"></IgrColumn>
    <IgrColumn field="Title" header="Title" dataType="string"></IgrColumn>
    <IgrColumn field="HireDate" header="Hire Date" dataType="date"></IgrColumn>
    <IgrColumn field="OnPTO" header="On PTO" dataType="boolean"></IgrColumn>

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

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

Observação: todas as colunas, excluindo a chave primária, são editáveis na linha que adiciona a interface do usuário por padrão. Se você deseja desabilitar a edição de uma coluna específica, é necessário definir a editable entrada da coluna como false.

Observação: as IgrGridEditingActions entradas que controlam a visibilidade dos botões adicionar linha e adicionar filho podem usar o contexto da faixa de ação (que é do tipo IgrRowType para ajustar quais registros os botões são exibidos.

O interno BaseTransactionService é fornecido IgrTreeGrid automaticamente. Ele mantém as alterações de célula pendentes até que o estado da linha seja enviado ou cancelado.

Start Row Adding Programmatically

IgrTreeGrid permite gerar programaticamente a interface do usuário de adição de linha usando dois métodos públicos diferentes. Um que aceita uma ID de linha para especificar a linha na qual a interface do usuário deve ser gerada e outro que funciona por índice. Você pode usar esses métodos para gerar a interface do usuário em qualquer lugar dentro da exibição de dados atual. Não há suporte para alterar a página ou especificar uma linha que seja, por exemplo, filtrada.

Usar beginAddRowById requer que você especifique a linha a ser usada como contexto para a operação por its RowID (PK). Em seguida, o método funciona como se o usuário final tivesse clicado no botão de faixa de ação adicionar linha para a linha especificada, gerando a interface do usuário sob ela. O segundo parâmetro controla se a linha é adicionada como filho à linha de contexto ou como irmão. Você também pode fazer com que a interface do usuário apareça como a primeira linha na grade, passando null para o primeiro parâmetro.

this.treeGrid.beginAddRowById('ALFKI', true);   // Spawns the add row UI to add a child for the row with PK 'ALFKI'
this.treeGrid.beginAddRowById(null);            // Spawns the add row UI as the first record

O beginAddRowByIndex método funciona de forma semelhante, mas a linha a ser usada como contexto é especificada pelo índice.

this.treeGrid.beginAddRowByIndex(10, true);   // Spawns the add row UI to add a child for the row at index 10
this.treeGrid.beginAddRowByIndex(null);       // 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.
A IgrTreeGrid rolagem para exibir totalmente a interface do usuário de adição de 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 de árvore para obter mais informações.

Depois que uma nova linha é adicionada por meio da interface do usuário de adição de linha, sua posição e/ou visibilidade é determinada pelo estado de classificação, filtragem e agrupamento do IgrTreeGrid. Em um IgrTreeGrid que não tem nenhum desses estados aplicados, ele aparece como o último registro. Uma barra de lanches é exibida brevemente contendo um botão que o usuário final pode usar para rolar até IgrTreeGrid sua posição se não estiver em view.

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

ALT + SHIFT + + - Enters edit mode for adding a child

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 do IgrTreeGrid for modificada. Todas as alterações feitas pelo usuário final são enviadas. As operações que alteram a visualização de dados incluem, mas não se limitam a, classificaçã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 o RowAddTextDirective.

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

Styling

A interface do usuário de adição de linha compreende os botões nas IgrActionStrip ações de edição, os editores de edição e a sobreposição, bem como a barra de lanches que permite que os usuários finais rolem até a linha recém-adicionada. Para estilizar esses componentes, você pode consultar estes guias abrangentes em seus respectivos tópicos:

API References

rowEditable
RowEditEnter
RowEdit
RowEditDone
RowEditCancel
endEdit
primaryKey
IgrTreeGrid

Additional Resources

Edição de grade de árvore

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

React Tree Grid Row Adding