A Grade é um componente visual que permite a exibição de dados de forma organizada, semelhante a uma tabela. Muito poderosa e customizável, a grade proporciona a vinculação entre vários Componentes visuais fonte de dados, adicionar diversas funcionalidades pré-configuradas ou criadas pelo desenvolvedor.
A Grade pode ser usada como uma simples tabela ou para um CRUD com diversas funcionalidades. Por sua versatilidade, esse componente pode ser adaptado à regra de negócio do seu sistema com poucas configurações.
Não é possível utilizar a mesma fonte de dados para dois componentes na mesma tela. |
Na figura 1.1 vemos um exemplo de grade destacando algumas áreas e seus elementos.
Figura 1.1 - Componente grade com alguns registros
Figura 1.2 - Filtro sendo adicionando na coluna NOMEPRODUTO
Nome | Propriedade | Função |
---|---|---|
Configurações | options | Abre a janela de configurações da Grade. |
Valor | ng-model | Propriedade Angular que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação. |
Fixar cabeçalho | scrollable | Se definido como sim, a grade exibirá uma barra de rolagem quando a altura total da linha (ou largura) exceder a altura (ou largura) da grade. Por padrão, a rolagem está habilitada. |
Identificador | id | Atributo que especifica um id exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Estilo | style | Altera o estilo geral do componente da forma inline. |
Exibir | ng-show | Propriedade Angular usada para mostrar ou oculta o componente. |
Repetir | crn-repeat | Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados. |
Segurança | cronapp-security | Abre a janela de seleção dos grupos com permissões para visualização ou edição da Grade. |
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente Grade.
Nome em português | Nome em inglês | Descrição |
---|---|---|
Barra de Ferramentas | Toolbar | Estiliza a barra de ferramenta da Grade (destaque 1 da figura 1.1). |
Botão de Adicionar | Add Button | Estiliza o botão "+ Adicionar" na barra de ferramenta da Grade (destaque 1 da figura 1.1). |
Botão de Salvar Alterações | Save Changes Button | Estiliza o botão "Salvar Alterações" na barra de ferramentas da grade, esse botão é exibido apenas quando a Grade está com a opção "Salvar em lote" habilitada. |
Botão de Cancelar Alteração | Cancel Changes Button | Estiliza o botão "Cancelar Alterações" na barra de ferramentas da grade, esse botão é exibido apenas quando a Grade está com a opção "Salvar em lote" habilitada. |
Agrupar Colunas | Column Group | Estiliza a barra de agrupamento da Grade (destaque 2 da figura 1.1). |
Item Agrupado | Grouped Item | Estiliza os itens adicionados na barra de agrupamento da Grade (destaque 2 da figura 1.1). |
Cabeçalho | Header | Estiliza a linha de cabeçalho da Grade. |
Ícone do Filtro | Filter Icon | Estiliza o ícone de filtro no cabeçalho da Grade (destaque 4 da figura 1.1). |
Linha Padrão | Default Row | Estiliza todas as linhas de registros. |
Linha Alternada | Alternate Row | Estiliza as linhas de número ímpares dos registros (a primeira linha possui número 0). |
Linha Selecionada | Selected Row | Estiliza as linhas selecionadas da Grade. |
Ao passar o mouse no botão de ação | On hover action button | Estiliza os botões de Ação ao passar o mouse sobre eles. |
Botão de ação Editar | Edit action button | Estiliza o botão "Editar" na coluna de eventos (destaque 5 da figura 1.1). |
Botão de ação Deletar | Delete action button | Estiliza o botão "Deletar" na coluna de eventos (destaque 5 da figura 1.1). |
Botão de ação Atualizar | Update action button | Estiliza o botão "Salvar" na coluna de eventos, esse botão é exibido apenas quando a Grade está configurado para edição em linha, (destaque 5 da figura 1.1). |
Botão de ação Cancelar | Cancel action button | Estiliza o botão "Cancelar" na coluna de eventos, esse botão é exibido apenas quando a Grade está configurado para edição em linha, (destaque 5 da figura 1.1). |
Área de paginação | Pagination Container | Estiliza a área de paginação da Grade (destaque 6 da figura 1.1). |
Caixa de seleção da Paginação | Pagination Combobox | Estiliza a caixa de seleção que define o número de registros por página (destaque 7 da figura 1.1). |
Ao passar o mouse na Paginação | Mouse Hover the Pagination | Estiliza as numerações da página ao passar o cursor do mouse por cima (destaque 6 da figura 1.1). |
Paginação selecionada | Selected paging | Estiliza o valor selecionado na caixa de seleção da quantidade de itens por páginas (destaque 7 da figura 1.1) |
Marcador da Página Atual | Current Page Marker | Estiliza o círculo que indica a página visível no momento (destaque 6 da figura 1.1). |
Botão Customizável | Custom Button | Estiliza os botões criados pelo desenvolvedor a partir da aba Barra de ferramentas da janela de Opções da Grade (destaque 1 da figura 1.1). |
A propriedade Configurações abre a janela de Opções da Grade, nela realizamos todas as configurações e customizações da grade.
Na Figura 2.1 mostrando as áreas de configuração da janela Opções da Grade.
Figura 2.1 - Janela de Opções da Grade
A aba Geral (área 3 da Figura 2.1) define as configurações mais amplas da grade, como fonte de dados, tamanho e modo de edição.
CTRL
para selecionar várias linhas ou adicione o tipo de coluna Checkbox de seleção.Ao utilizar as opções "Em linha" ou "Pop up" no campo Editável, a Grade vai gerar campos de forma automática para adicionar ou editar o registro selecionado. Esses campos possuirão o mesmo Valor (ng-model) dos campos (atributos) da Fonte de dados (ex.: |
É possível obter o valor dos itens selecionados na Grade através de dois blocos de programação: Obter valor do Campo e Obter Linhas Selecionadas da Grade. Para utilizar o primeiro bloco, configure o campo da Grade como Chave, para obter o ID dos registros selecionados, ou Objeto, para obter os objetos dos registros selecionados. O segundo bloco somente obtém o campo Objeto da Grade, mesmo que seja configurada para obter a Chave. |
A aba de Exibição habilita ou desabilita algumas funcionalidades da grade.
Figura 2.2 - Aba que habilita alguns de itens a serem exibidos na grade
Essa aba é responsável por alterar e adicionar o conteúdo na área de título e adicionar componentes personalizados.
Figura 2.3 - Aba responsável por editar a barra de título da grade
Essa aba nos mostra uma tabela representando as colunas da Grade para personalização. Além da origem do conteúdo de cada coluna da Grade, essa tabela possui colunas de personalização rápida (Ordenável, Pesquisável, Listagem, Crud e Requerido) que podem ser configurados na própria tabela clicando no X para habilitar ou desabilitar, além de botões de edição, exclusão e segurança para cada coluna da Grade (itens 2, 3 e 4 da Figura 2.4).
Figura 2.4 - Aba de customização das colunas da grade
Para adicionar ou editar uma coluna, basta clicar no botão Adicionar coluna ou Edição (item (2) da Figura 2.4) na aba Colunas de edição da grade. Nela podemos definir quatro tipos de colunas para a grade:
Figura 2.5 - Configuração da aba Geral do tipo de coluna Banco de dados
Opções da caixa de seleção Tipos de Coluna:
A aba Sumário só será exibida na janela Coluna quando a opção Banco de dados estiver selecionada no campo Tipo de coluna.
O sumário permite adicionar ao final da coluna alguns cálculos referentes ao conteúdo da coluna. É possível inserir mais de um sumário para uma mesma coluna ou adicionar sumários para colunas diferentes.
Quando a Grade estiver em modo agrupamento, além de exibir um sumário em cada item agrupado, será exibido um sumário geral, referente a todos os itens agrupados.
Figura 2.6 - Aba Sumário da janela de configurações das colunas
Botões
Campos
Figura 2.7 - Uso do sumário para calcular a soma e média dos valores da coluna valor
Essa aba permite realizar edições na imagem através da tag "style". No exemplo abaixo, estamos definindo uma largura máxima de 50px e um border radius de 10px.
Figura 2.8 - Aba Template
O botão Redimensionar colunas abre uma nova janela para exibir os campos que estão marcados como Visível na listagem, permitindo selecionar quais dessas colunas serão exibidas em diferentes tamanhos da tela.
Ao selecionar uma das opções de dispositivos, a tabela é redimensiona horizontalmente com base em um valor médio para esse dispositivo. Logo abaixo da tabela temos duas caixas de seleção que exibe o tamanho das colunas em porcentagem (Relativo) ou pixels (Absoluto). Quando selecionamos algum dispositivo móvel e a opção Relativo, um pequeno espaço é retirado para impedir que a Grade ocupe toda a área horizontal do dispositivo, esse valor é exibido na área Percentual restante.
Desmarcando um dos campos, o dispositivo selecionado não irá exibi-lo. Essa funcionalidade é muito útil para melhorar a usabilidade do sistema em pequenos dispositivos.
Figura 2.9 - Redimensionamento de colunas da grade
Essa aba permite agrupar automaticamente os itens da lista por um ou mais campos (colunas). Para agrupar, basta clicar em Adicionar agrupamento e selecionar um dos campo da Fonte de dados (Figura 2.10). Esse procedimento irá iniciar a Grade em modo agrupado. Porém, se a caixa de seleção Permitir agrupar na aba Exibição estiver habilitado, os campos/colunas agrupados serão exibidos na área (1) destacada na figura 2.11 e o usuário poderá modificar o agrupamento, retirando ou adicionando colunas para agrupamento. Caso o Permitir agrupar não esteja habilitado, essa área não será exibida, mas a grade continuará agrupada com base nas configurações padrão da aba Agrupamentos.
Figura 2.10 - Aba Agrupamentos
As colunas agrupadas se transformam em linhas e os itens relacionados a ela ficam aninhados. Uma seta (item (2) da figura 2.11) será exibida para permitir recolher ou expandir o conteúdo associado.
Na figura 2.11 podemos ver o comportamento da opção sumário quando a grade é agrupada. O texto "Total dessa cidade" refere-se ao total de itens por agrupamento e será exibido em todos os agrupamentos expandidos, enquanto o texto "Total de cliente" está relacionado com todos os itens da lista e será exibido no rodapé da lista. Acesse sumário para mais informações.
Figura 2.11 - Grade agrupada pelo campo cidade e com sumário
Neste tópico veremos algumas configurações específicas para o componente Grade.
A funcionalidade Mestre e detalhe permite vincular duas ou mais Grades através de suas fontes de dados, desde que estas tenham vínculo de FK (chave estrangeira) em suas Entidades. É possível configurar e personalizar cada grade de forma distinta. O mestre-detalhe permite tanto a visualização quanto manipulação de dados, ao inserir ou atualizar toda a hierarquia do mestre detalhe (pai, filho e demais), salvando ou editando, as informações serão enviadas em uma única requisição. Por exemplo, em uma estrutura com 3 entidades (país, estado e cidade), em vez de salvar o país, depois o estado e por último a cidade, tudo será enviado e salvo de uma única vez. Isso é feito para garantir a unicidade da manipulação de um único formulário do mestre-detalhe.
Existem duas formas de vincular as Grades: interna e externa.
Na grade interna cada linha da grade Mestre expande uma subgrade detalhe. Esse vínculo é feito adicionando um detalhe na janela de Opções da grande (1), selecionando a Fonte de dados desse detalhe e realizando o vínculo no campo Mestre detalhe (2), como mostrado na Figura 3.1.
Figura 3.1 - Vinculando o conteúdo da fonte de dados Cidade a Master.
Dessa forma, ao selecionar um item da Grade Estados, sua linha expande e exibe a subgrade Principais cidades.
Figura 3.2 - Grade interna
Para vincular as grades de forma externa, é necessário arrastar 2 grades para o formulário (1) e (2), configurar cada uma com uma fonte de dados que possuam relacionamentos de chave estrangeira (FK) e na fonte de dados que possuir a FK, vincular na propriedade Mestre detalhe (3). Essa configuração pode ser vista na Figura 3.3.
Figura 3.3 - Usando a propriedade Mestre Detalhe para vincular duas grades distintas
Com a opção de configuração externa, ao clicar em um item da grade Estados, a grade inferior Principais cidades exibem somente os itens vinculados.
Figura 3.4 - Grade externa
Quando a Grade possui muitas colunas, é possível que ela ultrapasse o limite da div
em que ela está inserida, situação comum em Grades dentro de modais. Abaixo são apresentadas algumas opções para contornar essa situação
div
na qual ela está inserida.div
em que a Grade está inserida através do CSS. Acesse o tópico Dimensões da documentação Estilo CSS para mais informações.O campo calculado é um recurso da Fonte de dados e permite adicionar atributos temporários a uma entidade. Esses atributos podem ser exibidos na Grade, mas possui algumas limitações, como não permitir que sua coluna seja ordenada. Ainda assim, se o atributo que gerou o campo calculado possuir a mesma relação de ordenação, é possível simular a ordenação através da coluna do campo calculado.
Um exemplo de relação de ordenação inversa seria a utilização do atributo "Data de nascimento" para criar o campo calculado "Idade". A ordenação do campo Idade não funcionará corretamente, pois quanto menor uma data, maior será a idade do usuário.
Já no exemplo da figura 4.1, a entidade "Cidade" possui os atributos "nome" e "estado" e em sua fonte de dados foi criado o campo calculado "cidadeEstado", que concatena os dois atributos para exibir na mesma coluna da Grade. Na janela de edição da coluna "cidadeEstado" (Figura 4.1) é possível definir em Campo (1) o atributo que será utilizado para ordenar, enquanto que em Campo exibição (2) podemos definir o atributo do campo calculado que será exibido para o usuário. Também é necessário selecionar a caixa de seleção Ordenável (3).
Figura 4.1 - Permitindo a ordenação do campo calculado com base em outro atributo
Se a Grade estiver exibindo a coluna do campo calculado (destaque 1 na figura 4.2) e a coluna que originou o campo calculado (destaque 2 na figura 4.2), quando o usuário solicitar a ordenação (clicando no nome da coluna), a seta que indica ascendência e descendência aparecerá tanto na coluna do campo calculado quanto na coluna do campo origem (destaque 2 na figura 4.2).
Figura 4.2 - Exemplo de ordenação para campo calculado
Outra forma de adicionar uma Grade é a partir do recurso de Drag and Drop (arrastar e soltar), este componente pode ser gerado tanto com uma classe do Diagrama de dados quanto com uma Fonte de dados. Selecione um dos dois itens da árvore de arquivos/recursos e arraste-o para a área de edição. Para mais detalhes sobre essa funcionalidade, acesse o tópico "Drag and Drop da árvore de arquivos" na documentação Editor de views.
Para o exemplo a seguir, arrastamos a classe User do Diagrama de dados e um menu de contexto é exibido.
Figura 5 - Drag and drop da classe User para o editor de view
Após clicar na opção Grade, a tela de Opções da Grade será exibida, permitindo que o usuário configure o componente visual. Na figura abaixo podemos conferir o resultado final da criação da Grade através do drag and drop da árvore de recursos.
Figura 5.1 - Grade gerada a partir do drag and drop da árvore de arquivos
Nome em inglês
Grid
Nesta página
Compatibilidade
Formulário Web
Equivalente web
Botão do Componente
Imagem no Editor Visual
Assista sobre o tema no Cronapp Academy
Caso seja seu primeiro acesso ao Cronapp Academy, crie antes uma conta gratuita e matricule-se no curso abaixo. |