Adicionando linhas em Angular grade

    O Grid fornece uma maneira conveniente de executar manipulações de dados por meio da adição de linha embutida e uma API poderosa para operações CRUD Angular. Adicione um componente Faixa de ação com ações de edição ativadas no modelo da grade, passe o mouse sobre uma linha e use o botão fornecido ou pressione ALT + + para gerar a linha adicionando a interface do usuário.

    Angular Grid Row Adding Example

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

    Row Adding Usage

    Para começar, importe o IgxGridModule no arquivo app.module.ts:

    // app.module.ts

...
import { IgxGridModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxGridModule],
    ...
})
export class AppModule {}

    Em seguida, defina uma Grade com a fonte de dados vinculada e rowEditable definida como verdadeira e um componente Faixa de ação com as ações de edição ativadas. A addRow entrada controla a visibilidade do botão que gera a linha que adiciona a interface do usuário.

    <igx-grid [data]="data" [primaryKey]="'ProductID'" [autoGenerate]="false" [rowEditable]="true">
    <igx-column field="ProductID" header="Product ID" dataType="number"></igx-column>
    <igx-column field="ReorderLevel" header="ReorderLever" dataType="number"></igx-column>
    <igx-column field="ProductName" header="ProductName" dataType="string"></igx-column>
    <igx-column field="UnitsInStock" header="UnitsInStock" dataType="number"></igx-column>
    <igx-column field="OrderDate" dataType="date"></igx-column>
    <igx-column field="Discontinued" header="Discontinued" dataType="boolean"></igx-column>
    
    <igx-action-strip #actionstrip>
        <igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
    </igx-action-strip>
</igx-grid>
    Note

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

    Note

    Cada coluna, excluindo a chave primária, é editável 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.

    Note

    A entrada IgxGridEditingActions que controla a visibilidade do botão adicionar linha pode usar o contexto da faixa de ação (que é do tipo RowType) para ajustar quais registros o botão mostra.

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

    Start Row Adding Programmatically

    O Grid 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.

    O uso beginAddRowById exige que você especifique a linha a ser usada como contexto para a operação por seu 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 interface do usuário de adição de linha de posição padrão está abaixo da linha para a qual o usuário final clicou no botão adicionar linha.

    • A grade rola 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 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 da Grade. Em uma Grid que não tem nenhum desses estados aplicados, ela aparece como o último registro. Uma barra de lanches é exibida brevemente contendo um botão que o usuário final pode usar para rolar a grade para 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 exibição de dados da Grade 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 igxRowAddTextDirective.

    <ng-template igxRowAddText>
	Adding Row
</ng-template>

    Customizing Buttons

    Personalizar os botões da sobreposição de edição de linha é possível usando o igxRowEditActionsDirective. Se você quiser que os botões façam parte da navegação do teclado, cada um deles deve ter o igxRowEditTabStopDirective.

    <ng-template igxRowEditActions let-endRowEdit>
	<button igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button>
	<button igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button>
</ng-template>
    Note

    O uso igxRowEditActions da diretiva alterará as ações de edição para editar e adicionar botões de sobreposição.

    Remote scenarios

    Na maioria dos cenários de dados remotos, a atribuição de chave primária ocorre na solicitação de criação do servidor. Nesse caso, os registros adicionados no cliente não terão o valor final da chave primária até serem salvos no banco de dados do servidor. Nesse caso, a maneira recomendada de lidar com essa atualização no Grid é a seguinte:

    • Se a Grid não usar transações.

      Depois que a solicitação de criação for concluída com êxito e retornar os dados de registro adicionados, você poderá substituir a ID desse registro na instância de registro de dados local.

    • Se a Grid usar transações.

      Depois que a solicitação de criação ou atualização em lote for concluída com êxito e retornar as instâncias de registro adicionadas (com seus IDs gerados pelo banco de dados), as transações ADD relacionadas deverão ser limpas do log de transações usando o método de API de limpeza. Isso é necessário porque a transação local terá um campo id gerado, que pode ser diferente do criado no banco de dados, portanto, eles devem ser limpos. Em seguida, você pode adicionar os registros passados na resposta à instância de dados local.

    Isso garantirá que as IDs geradas remotamente sejam sempre refletidas nos dados locais e que as operações subsequentes de atualização/exclusão tenham como alvo as IDs de registro corretas.

    Estilização

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