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 oIgxGridModule arquivo no app.module.ts:

    // app.module.ts

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

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

    Depois, defina uma Grade com fonte de dados vinculada erowEditable definida como true e um componente Action Strip com ações de edição ativadas. OaddRow input controla a visibilidade do botão que gera a linha de interface adicionada.

    <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

    Toda coluna exceto a chave primária pode ser editada na linha, adicionando UI por padrão. Se você quiser desativar a edição para uma coluna específica, então precisa definir aeditable entrada da coluna parafalse.

    Note

    A entrada IgxGridEditingActions que controla a visibilidade do botão adicionar linha pode usar o contexto da fita de ação (que é do tipoRowType) para ajustar finamente quais registros o botão mostram.

    O internoIgxBaseTransactionService é fornecido automaticamente para a Grid. Ele mantém as mudanças pendentes de célula até que o estado da linha seja submetido 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.

    UsarbeginAddRowById exige que você especifique a linha a ser usada como contexto para a operação pelo seu rowID (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.

    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

    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.

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

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

    Customizing Buttons

    Personalizar os botões da sobreposição de edição de linhas é possível usando oigxRowEditActionsDirective. Se você quer que os botões façam parte da navegação do teclado, então 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

    UsarigxRowEditActions diretiva vai alterar as ações de edição tanto para editar quanto para 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 de adicionar linhas inclui os botões nasIgxActionStrip 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.