Web Components Adição de linha de grade de árvore

EleIgcTreeGridComponent oferece uma forma conveniente de realizar manipulações de dados por meio da adição de linhas inline e uma API poderosa para operações de Web Components CRUD. Adicione umIgcActionStrip componente com ações de edição ativadas no template da grade, passe o mouse por uma linha e use o botão fornecido, pressione ALT + + para gerar a linha adicionando UI ou ALT + SHIFT + + para gerar a interface para adicionar um filho para a linha selecionada.

Web Components Tree Grid Row Adding Example

Row Adding Usage

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

<igc-tree-grid id="treeGrid" primary-key="ID" foreign-key="ParentID" row-editable="true">
    <igc-column field="Name" data-type="String"></igc-column>
    <igc-column field="Title" data-type="String"></igc-column>
    <igc-column field="HireDate" data-type="Date"></igc-column>
    <igc-column field="OnPTO" data-type="Boolean" width="130px">
    </igc-column>
    <igc-column field="Age" data-type="Number"></igc-column>
    <igc-action-strip id="actionstrip">
        <igc-grid-editing-actions add-row="true">
        </igc-grid-editing-actions>
    </igc-action-strip>
</igc-tree-grid>

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: OsIgcGridEditingActions comandos que controlam a visibilidade dos botões de adicionar linha e adicionar filhos podem usar o contexto de tira de ação (que é do tipoIgcRowType para ajustar finamente quais registros os botões aparecem).

O internoBaseTransactionService é fornecidoIgcTreeGridComponent 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

IgcTreeGridComponentpermite 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. O segundo parâmetro controla se a linha é adicionada como filho à linha de contexto ou como irmão. Você também pode fazer a interface aparecer como a primeira fileira da grade passandonull pelo 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

ObeginAddRowByIndex método funciona de forma semelhante, mas a linha a usar como contexto é especificada por í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.
OsIgcTreeGridComponent 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 de árvore 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 doIgcTreeGridComponent. Em umIgcTreeGridComponent 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 deslizarIgcTreeGridComponent até sua posição caso não esteja à vista.

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 doIgcTreeGridComponent 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.

this.grid.rowAddTextTemplate = (ctx: IgcGridEmptyTemplateContext) => {
    return html`Adding Row`;
}

Styling

A interface de adicionar linhas inclui os botões nasIgcActionStrip 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

RowEditable
RowEditEnter
RowEdit
RowEditDone
RowEditCancel
EndEdit
PrimaryKey
IgcTreeGridComponent

Additional Resources

Edição de grade de árvore

Nossa comunidade é ativa e sempre acolhedora para novas ideias.