Os 5 principais recursos do Angular Data Grid que você nunca soube que precisava

Angular é a ferramenta de desenvolvimento front-end mais popular até hoje. Sim, é um pouco complexo de aprender, mas como uma linguagem de programação front-end de ponta, Angular oferece funcionalidade pronta para uso, arquitetura multiplataforma, consistência em toda a base de código, capacidade de manutenção, estrutura de desenvolvimento modular. Caixas de ferramentas de interface do usuário e bibliotecas de interface do usuário, como Ignite UI for Angular Library, por exemplo, aproveitam ao máximo a estrutura Angular e a usam para criar recursos imbatíveis de grade de dados corporativos e principais acima de tudo. Mas quais são alguns dos melhores para usar?

Existem vários recursos essenciais cruciais e entendemos perfeitamente que os desenvolvedores geralmente procuram coisas como classificação, filtragem, edição, seleção e paginação. Sendo os mais proeminentes, porém, esperamos que eles sejam por padrão. É por isso que todos os trajes de interface do usuário se esforçam para fornecer componentes Angular Data Grid que incluem as opções mencionadas acima para gerenciamento e visualização de dados.

Vamos deixar isso de lado por enquanto. Em vez de listá-los novamente apenas para confirmar sua necessidade, vamos nos concentrar em recursos que são menos conhecidos, mas são obrigatórios e extremamente úteis em grades modernas.

Vamos começar então e ver quais são os 5 principais recursos da grade de dados Angular que você nunca soube que precisava.

Edição em lote - uma maneira de acumular melhor as alterações

Em essência, Angular Grid Batch Editing permite que os usuários modifiquem vários registros de dados na grade e enviem todas as alterações ao mesmo tempo, trabalhando com transações. Você pode usar a edição em lote para adiar o salvamento de várias alterações de valor de célula. Eles podem ser salvos em um buffer e facilmente descartados antes de confirmar as edições finais.

Não é segredo que um dos maiores e mais comuns desafios que os programadores têm ao criar aplicativos que consomem centenas de milhares e até milhões de registros, é criar uma experiência do usuário sustentável e escalável para edição. E o recurso de edição em lote Angular Grid vem como a solução para isso. Ativando o modo de edição em lote, você pode acumular alterações sem afetar imediatamente os dados subjacentes. O que minimiza o número de solicitações HTTP enviadas ao servidor ao atualizar registros.

Para implementar a Edição em Lote usando seu componente ao usar Ignite UI for Angular pacote, você precisa fornecer uma implementação do Serviço de Transações (IgxTransactionService) ou pode substituir a sua própria. Nosso pacote Ignite UI for Angular é enviado com uma implementação completa de serviço de transação com suporte total a transações, desfazer e refazer.

Caso você precise de um tutorial prático e mais exemplos de edição de lote de grade Angular, há uma ótima leitura sobre Como criar um serviço de transação que você pode ler e ver como tudo é feito.

Advanced Filtering – To Build More Complex Filter Criteria 

A Filtragem Avançada no Angular Data Grid funciona fornecendo uma interface do usuário de filtragem que permite a criação de grupos com condições de filtragem mais complexas em todas as colunas para qualquer tabela Angular Material. Depois de configurar esse recurso, um botão de filtragem avançada é renderizado na barra de ferramentas da grade. Os usuários devem clicar neste botão para abrir a caixa de diálogo de filtragem avançada.

No nosso caso, a caixa de diálogo está usando oConstrutor de Consulta IgxQueryIgxBuildercomponente para gerar, exibir e editar a lógica de filtragem. Para ativar esse recurso, você deve definir allowAdvancedFiltering e adicionar o componente igx-grid-toolbar dentro da grade.

<igx-grid [data]="data" [autoGenerate]="true" [allowAdvancedFiltering]="true"> 
    <igx-grid-toolbar></igx-grid-toolbar> 
</igx-grid> 

Para demonstrar como esse componente é personalizável, compartilharei um exemplo de configuração de filtragem avançada externa que também funciona fora da grade. Tudo o que você precisa fazer é adicionar o componente de diálogo de filtragem avançada.

<igx-advanced-filtering-dialog [grid]="grid1"> 

</igx-advanced-filtering-dialog

Angular Persistência de estado de grade e uma string JSON serializada

A persistência de estado permite que os programadores salvem e restaurem o estado da grade de maneira simples. Se um usuário fizer alguma modificação nos dados visualizados, quiser aplicar classificação ou filtragem ou qualquer outra coisa, o componente Persistência de estado salvará essas alterações e as restaurará depois que a página for recarregada.

Você não verá este listado com frequência entre os recursos mais comuns do Angular Grid, mas é extremamente vital, especialmente para desenvolvedores com um trabalho intensivo apenas em grades ou para aqueles que não desejam pré-configurar diferentes estados de recursos, como:

• Make CustomerID column with DESC order 
• Aplicar filtro Contém à coluna ProductName
• Fixe "Sobrenome" e "Idade" para mostrar à esquerda

. Essencialmente, esse método serve para retornar o estado da Grade de Dados em uma cadeia de caracteres JSON serializada, para que você possa pegá-lo e salvá-lo em qualquer armazenamento de dados (banco de dados, nuvem, navegador localStorage ou outro) que desejar.

Quando oIgxGridStatediretiva é aplicado na grade, ele expõe os métodos getState e setState que os desenvolvedores podem usar para obter persistência de estado em qualquer cenário.

Virtualização – Tornando os dados mais consumíveis

Angular Grid Virtualization é usado para acompanhar qual parte dos dados é visível e precisamente como eles são renderizados. Ele divide os dados em mandris menores que são trocados de uma janela de visualização de contêiner enquanto o usuário rola horizontalmente/verticalmente para carregar os dados do buffer.

Com o objetivo de otimizar o desempenho da renderização, o Ignite UI for Angular Grid Virtualization funciona de maneira um pouco diferente – ele troca dados em vez de remover e adicionar elementos DOM. Mas você pode ler mais sobre isso na página de documentação oficial.

Angular Grid Keyboard Navigation and The Use Of Interactive Keyboard Shortcuts 

Quando ativado, ele fornece várias interações de teclado (Alt + L, Ctrl + Shift + L, Ctrl + Seta para cima, Ctrl + Seta para baixo, etc.), proporcionando melhor usabilidade e UX, independentemente de como os usuários navegam nas páginas.

Na Infragistics, queremos garantir uma experiência de usuário ideal, independentemente de você estar usando um mouse, um touchpad ou apenas um teclado. É por isso que criamos um novo padrão de interface do usuário para navegação por teclado em uma página, chamado Navegação de elemento ativo. Esse padrão reduz o número de paradas de tabulação na interface projetada para o igxGrid para apenas cinco e expõe muitos novos atalhos de teclado para eficiência. Cada elemento de parada de tabulação tem um ponto de entrada único e, a partir daí, os usuários podem navegar facilmente para diferentes itens no contêiner de elemento de grade correspondente simplesmente usando as teclas de seta. Assim, simplificando a navegação e melhorando a usabilidade.

Usado no Ignite UI for Angular Data Grid, o recurso Navegação pelo teclado melhora a acessibilidade do Grid e permite que as pessoas naveguem por qualquer tipo de elemento interno (célula, linha, cabeçalho de coluna, barra de ferramentas, rodapé, etc.). Sem mencionar que também é totalmente compatível com aria.

Embrulhar

Angular Edição em lote de grade, filtragem avançada, persistência de estado, virtualização e navegação por teclado não são mencionados com muita frequência em guias e artigos sobre Angular recursos de grade. Eles permanecem nos bastidores, enquanto coisas como classificação, edição, dimensionamento, paginação roubam seu trovão. Apesar de ser menos comum e mais solicitado por pessoas que trabalham principalmente com grades de dados, você ainda precisa desses 5 principais recursos para seus projetos.

Uma das desvantagens é que você raramente pode encontrar Edição em Lote, Filtragem Avançada, Persistência de Estado, Virtualização e Navegação por Teclado que funcionam bem com grades. Felizmente, Ignite UI for Angular Data Grid é a caixa de ferramentas definitiva que não apenas os embala, mas garante seu alto desempenho.

Vá em frente e experimente-os. Explore as demonstrações e veja como elas funcionam.