Customizando jqxGrid com CSS para Angular 6

Neste artigo veremos como fazer o processo de customização de estilos para o Grid que simula o MS Excel dentro de sua aplicação Angular ou de qualquer plataforma Javascript. A estilização foi elaborada desta forma para que um estilo pudesse escrito especificamente para as métricas de design da aplicação, vejamos como foi o processo:

https://www.jqwidgets.com/angular/

Durante o processo de captura dos requisitos da solução, um desafio importante foi feito a equipe de desenvolvimento em todas as camadas! Encontrar um componente Angular que fosse capaz de simular o comportamento do MS Excel e que tivesse uma customização de recursos o mais documentada possível e que também fosse gratuito. Feitas as pesquisas, poucas soluções ofereceram tamanha quantidade de recursos de qualidade e com um repositório bom de documentação, então a equipe decidiu pelo uso do jQWidgets (encontrado no link https://www.jqwidgets.com/angular/).

Além do desafio de customização em Angular (que consumiu bastante tempo da equipe da camada de Frontend do projeto) mas experiências à parte que deverão em breve serem contadas pela equipe de Front, vou compartilhar aqui a minha experiência em customizar este componente, que com toda certeza devem existir outras formas mais eficientes de customizar, mas a alternativa encontrada pela equipe do projeto no momento foi a que vou descrever neste artigo! Vamos lá?

Primeira coisa era saber por quais classes deveria referenciar os elementos para que conseguisse editar seus estilos com sucesso, então o velho inspecionar elemento do Google Chrome ajudou bastante!

Com classes como jqx-grid-cell-right-align estão presentes em todo o componente:

Recurso de inspecionar elemento no jqxGrid

Para criar um estilo específico para customizar o grid com suas configurações padrão, foi necessário primeiro criar um modelo de organização para que os estilos ficassem com a manutenção mais simples no futuro quando a aplicação crescesse, então as pastas de estilo foram separadas.

Estrutura de diretórios do projeto Angular para os estilos do projeto

Leave a Reply

Your email address will not be published. Required fields are marked *

[FIUrlhttp://mdm.miximages.com/Angular/17o2cn784KvCDCd_lCX52iw.png]