Web Components Adição de linha de grade hierárquica

    O recurso Ignite UI for Web Components Adição de Linha em Web Components Grade Hierárquica permite que os usuários insiram e enviem novos registros de dados sem navegar para um formulário ou página separada. Com o IgcHierarchicalGridComponent, os usuários podem manipular dados por meio da adição de linhas embutidas e uma API poderosa para operações CRUD. Adicione um IgcActionStrip componente com ações de edição ativadas no modelo da grade. Depois disso, passe o mouse sobre uma linha e use o botão fornecido. Por fim, pressione ALT + + para gerar a linha adicionando a interface do usuário.

    Web Components Hierarchical Grid Row Adding Example

    Row Adding Usage

    Em seguida, defina uma fonte de IgcHierarchicalGridComponent dados com vinculação, rowEditable definida como true e um IgcActionStrip 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.

    <igc-hierarchical-grid id="hGrid" auto-generate="false" primary-key="Debut" row-editable="true">
    <igc-column field="Artist" data-type="String"></igc-column>
    <igc-column field="HasGrammyAward" header="Has Grammy Award?" data-type="Boolean'">
    </igc-column>
    <igc-column field="Debut" data-type="Number"></igc-column>
    <igc-column field="GrammyNominations" header="Grammy Nominations" data-type="Number"></igc-column>
    <igc-column field="GrammyAwards" header="Grammy Awards" data-type="Number"></igc-column>

    <igc-action-strip id="actionstrip1">
        <igc-grid-editing-actions add-row="true"></igc-grid-editing-actions>
    </igc-action-strip>

    <igc-row-island key="Albums" auto-generate="false" primary-key="USBillboard200" row-editable="true">
        <igc-column field="Album" [data-type]="String"></igc-column>
        <igc-column field="LaunchDate" header="Launch Date" data-type="Date"></igc-column>
        <igc-column field="BillboardReview" header="Billboard Review" data-type="Number"></igc-column>
        <igc-column field="USBillboard200" header="US Billboard 200" data-type="Number"></igc-column>
        <igc-row-island key="Songs" auto-generate="false" primary-key="Number" row-editable="true">
            <igc-column field="Number" header="No." data-type="Number"></igc-column>
            <igc-column field="Title" data-type="String"></igc-column>
            <igc-column field="Released" data-type="Date"></igc-column>
            <igc-column field="Genre" data-type="String"></igc-column>

            <igc-action-strip id="actionstrip3">
                <igc-grid-editing-actions add-row="true"></igc-grid-editing-actions>
            </igc-action-strip>

        </igc-row-island>

        <igc-action-strip id="actionstrip2">
            <igc-grid-editing-actions add-row="true"></igc-grid-editing-actions>
        </igc-action-strip>
    </igc-row-island>
</igc-hierarchical-grid>

    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: a IgcGridEditingActions entrada que controla a visibilidade do botão adicionar linha pode usar o contexto da faixa de ação (que é do tipo IgcRowType para ajustar quais registros o botão mostra.

    O interno BaseTransactionService é fornecido IgcHierarchicalGridComponent 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

    IgcHierarchicalGridComponent 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. 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.grid.beginAddRowById('ALFKI');  // Spawns the add row UI under the row with PK 'ALFKI'
this.grid.beginAddRowById(null);     // Spawns the add row UI as the first record

    O beginAddRowByIndex método funciona de forma semelhante, mas exige que você especifique o índice no qual a interface do usuário deve ser gerada. Os valores permitidos variam entre 0 e o tamanho da exibição de dados - 1.

    this.grid.beginAddRowByIndex(10);   // Spawns the add row UI at index 10
this.grid.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.

    • A IgcHierarchicalGridComponent 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 hierárquica 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 IgcHierarchicalGridComponent. Em um IgcHierarchicalGridComponent 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é IgcHierarchicalGridComponent sua posição se não estiver em view.

    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 do IgcHierarchicalGridComponent 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.

    • Ao gerar a interface do usuário para o IgcHierarchicalGridComponent, qualquer layout filho atualmente expandido para uma linha para a qual o usuário final clica no botão adicionar linha é recolhido.

    Customizing Row Adding Overlay

    Customizing Text

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

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

    Styling

    A interface do usuário de adição de linha compreende os botões nas IgcActionStrip 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

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.