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.

Uso

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.

Na figura 1.1 vemos um exemplo de grade destacando algumas áreas e seus elementos.

Figura 1.1 - Componente grade com alguns registros

1. Barra de título e ferramentas: área destinada a exibir o título da grade e os botões nativos ou customizados.

2. Barra de agrupamento: ao arrastar o cabeçalho de alguma das colunas para essa área, a grade altera a exibição dos seus itens de forma agrupada. É possível agrupar por mais de uma coluna.

3. Ordenação: ao clicar no nome da coluna, os elementos da grade são ordenados. O primeiro clique ordena de forma crescente, o seguindo clique de forma decrescente e o terceiro volta a ordenação feita pela fonte de dados. Quando uma coluna é ordenada, além de exibir setas (↑ e ↓) ao lado do título no cabeçalho, a coluna fica em um tom mais escuro destacando qual coluna está ordenando toda a grade (veja na coluna "EMAIL" da figura 1.1).

4. Filtro: é possível filtrar por uma ou várias colunas ao mesmo tempo (Figura 1.2), cada filtro ainda permite adicionar um condicional (e / ou). Ao adicionar um filtro, o símbolo do filtro fica em destaque na coluna filtrada.

5. Coluna eventos da linha: os botões editar e excluir (5 da Figura 1.1) são pré-configurados, porém podem ser removidos e novos botões podem ser criados com diversas funcionalidades, por exemplo um botão de exibição do relatório do registro.

6. Paginação: botões para avançar e retornar os itens paginados da grade.

7. Itens por página: seleciona a quantidade de registros a ser visualizada por vez. Esse valor é definido na propriedade "Linhas por página" da fonte de dados no editor de views.

8. Itens exibidos: informa quais itens estão sendo exibidos (valores ordenados) e o total de itens.

9. Atualizar: botão de atualização da grade.

Open

Principais propriedades

Aba de Propriedades

Na tabela abaixo estão descritas as propriedades disponíveis para o componente Grade.

Aba de Eventos

Na tabela abaixo estão descritos os tipos de eventos disponíveis para o componente Grade.

Aba de Estilos

Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente Grade.

Configurações

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.

Open

1. Detalhes: permite adicionar, excluir e selecionar cada detalhe para configurá-los separadamente. O item padrão "Master" não pode ser removido. Acesse o tópico Mestre e detalhe para mais informações.

2. Modelos: é possível selecionar modelos pré-configurados de grade ou de customização. Temos cinco opções:

   • Editável simples: adiciona somente o item de ordenação da aba Exibição;

   • Editável completa: adiciona todos os elementos da aba Exibição;

   • Listagem simples: exibe os itens como em uma tabela, permitido apenas ordenação por coluna;

   • Listagem completa: exibe os itens como em uma tabela, mas possui funcionalidades como: paginar, ordenar, agrupar, atualizar grade e outros;

   • Customizado: permite a personalização de todos os componentes da grade;

3. Abas de customização: toda a personalização da grade é feita nessa área. Abaixo detalharemos o conteúdo de cada uma de suas abas.

Aba Geral

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.

• Fonte de dados: seleciona uma fonte existente no formulário, cria ou adiciona uma nova fonte de dados ou edita a fonte selecionada.

• Altura: define a altura da grade na página em número de pixel e aceita somente valores numéricos (ex.: 200).

• Editável: informa se os itens poderão ser editáveis e como ocorrerá essa edição. As possibilidades são:

  1. Não: os botões que realizam alterações nos registros da Grade, como Adicionar, Editar e Excluir, serão ocultados. Os botões nativos "Exportar para Excel" e "Exportar para PDF" ou botões customizados não sofrem esse efeito, pois não alteram os registros.

  2. Em linha *: a adição ou edição ocorre na própria linha da grade;

  3. Pop up *: um pop up (modal) é aberto com os campos para inserção ou edição do item selecionado;

  4. Pop up customizado: habilita os campos Pop up inserção e Pop up edição;

  5. Pelo Datasource: a grade é oculta da tela e os campos de entrada de texto são exibidos na tela para edição ou adição, assim como ocorre nas páginas de CRUD no Cronapp;

• Pop up inserção: são exibidos os modais criados pelo usuário no formulário, dessa forma o usuário pode personalizar a inserção de item.

• Pop up edição: são exibidos os modais criados pelo usuário no formulário, dessa forma o usuário pode personalizar a edição de item.

• Permite selecionar linha: quando habilitado, ao clicar em uma linha a mesma ficará em destaque:

  1. Simples: seleciona apenas uma linha. É a opção default do campo;

  2. Múltipla: seleciona mais de uma linha. Utilize a tecla CTRL e clique nas linhas que deseja selecionar ou adicione o tipo de coluna Checkbox de seleção.

• Obter valor do campo como **: define como o valor será retornado, podendo ser:

  • Chave: retorna o ID dos registros selecionados;

  • Objeto: retorna o objeto dos registros selecionados - ele é o valor padrão desse campo.

• Salvar em lote: permite a modificação de vários registros, armazenando as alterações em cache antes de efetuar o salvamento em lote. Após a adição ou modificação de qualquer registro, serão exibidos os botões "Salvar Alterações" ou "Cancelar Alterações" na área de ferramentas da Grade (destaque 1 na figura 1.1). É importante destacar que esse recurso só funcionará para as opções "Em Linha" ou "Pop-up" do campo "Editável".

• Ocultar botões de edição no Pop up customizado: oculta os botões padrões de edição. Esse campo somente é habilitado quando a opção "Pop up customizado" é selecionado em Editável.

• Ative o botão Salvar + Inserir no pop-up personalizado: a propriedade é usada em conjunto com os recursos de Pop up customizado, Pop up de inserção e Pop up de edição, permitindo a adição de registros à grade por meio de um modal, eliminando a necessidade de fechá-lo e abri-lo novamente para inserções subsequentes.

Selecionando linhas

A Figura 2.1.1 apresenta um exemplo de seleção manual de múltiplos elementos da grade. Ao clicar e arrastar o mouse, todas as linhas da grade são selecionadas. A partir daí, é possível copiar o conteúdo usando Ctrl+C e colar com Ctrl+V, ou clicar com o botão direito do mouse e selecionar a opção "Copiar".

Open

Também é possível selecionar apenas um campo específico. Podemos utilizar o método citado anteriormente, clicando e arrastando o mouse, ou simplesmente clicando com o botão direito do mouse sobre o conteúdo do campo, isso fará com que uma caixa de texto seja exibida, permitindo assim, a cópia do seu conteúdo.

Open

Aba Exibição

A aba de Exibição habilita ou desabilita algumas funcionalidades da grade.

1. Permitir paginar: adiciona elementos de paginação no final da grade (destaque 6 da Figura 1.1);

2. Permitir ordenar: possibilita ordenar a grade utilizando uma coluna selecionada (destaque 3 da Figura 1.1);

3. Permitir agrupar: gera agrupamento das colunas selecionadas. O agrupamento ocorre ao clicar e arrastar o cabeçalho de uma das colunas para a área logo acima do cabeçalho (destaque 2 da Figura 1.1);

4. Permitir atualizar grade: adiciona botão para atualização da grade sem a necessidade de carregar a página inteira (destaque 9 da Figura 1.1);

5. Permitir seleção do total de registros a exibir: exibe o seletor de registro por páginas (destaque 7 da Figura 1.1). O número de itens exibidos por página na grade é definido na propriedade "Linhas por página" da fonte de dados.

Aba Barra de ferramenta

Essa aba é responsável por alterar e adicionar o conteúdo na área de título e adicionar componentes personalizados.

Open

1. Tipo: coluna que exibe os tipos de itens inseridos na grade.

2. Descrição: coluna que informa o que esse tipo de item faz.

3. Edição: abre a janela Barra de ferramenta para edição do item selecionado.

4. Excluir: apaga o item selecionado.

5. Segurança: abre a janela de seleção dos permissionáveis com acesso para visualização ou edição para o item selecionado.

6. Adiciona Item: abre a janela Barra de ferramenta para adicionar novo item.

7. Tipo de item: define o tipo de item a ser inserido. Os campos destacados na área (8) da figura 2.3 são alterados de acordo com a seleção do campo Tipo de item, as opções são:

   • Botão nativo: adiciona os botões pré-configurados da grade, são eles: 

     • Exportar para Excel; exporta o conteúdo da grade para um arquivo *.xlsx; 

     • Exportar para PDF: exporta o conteúdo da grade para um arquivo *.pdf;

     • Adicionar (Registro): permite incluir novos registros na grade. Por padrão, esse botão já é adicionado quando a grade possui permissão de inserção.

   • Título: define o título da grade, esse campo permite internacionalização do seu conteúdo.

   • Template: exibe um editor de texto para inserção de recursos extra, utilizando HTML e CSS.

   • Botão customizado: permite inserir um botão com evento personalizado na barra de ferramentas da Grade:

     • Cabeçalho: define o título do botão, permite internacionalização;

     • Ícone: define o ícone do botão;

     • Executar: abre a janela de seleção da ação.

Aba Colunas

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

Open

1. (botões) Ordenadores: altera a posição da coluna selecionada na grade.

2. Edição: abre a janela Coluna para personalizar a coluna da Grade selecionada.

3. Excluir: apaga a coluna da Grade selecionada.

4. Segurança: abre a janela de seleção dos permissionáveis com acesso de visualização ou edição para a coluna selecionada na Grade.

• (botão) Redimensionar colunas: abre a janela de redimensionamento das colunas, permitindo selecionar quais campos serão exibidos a depender do tamanho da tela.

• (botão) Remover colunas banco de dados: remove apenas as colunas originadas da fonte de dados, mantendo as colunas personalizadas.

• (botão) Remover colunas: exclui todas as colunas listadas da grade.

• (botão) Obter colunas da fonte de dados: recupera todas as colunas que fazem parte da fonte de dados.

• (botão) Adicionar coluna: abre a janela Coluna para adicionar uma nova coluna personalizada.

• Tipo de coluna: informa se a coluna é do tipo Banco de dados, Botão de comando, Link customizado ou Botão customizado.

• Campo: informa o nome do campo na fonte de dados ou o comando do evento, no caso de botão.

• Cabeçalho: título apresentado no cabeçalho da coluna na Grade (permite internacionalização).

• Largura: define a largura da coluna, informar o valor e a métrica (px, cm, % ...). Não informando valores, a coluna se ajustará a página.

• Ordenável: permite que a coluna selecionada ordene a Grade. A opção "Permitir ordenação" da aba Exibição deve está selecionada.

• Pesquisável: define as colunas que serão consultadas na pesquisa do usuário.

• Listagem: só serão listados na Grade os campos que possuem essa opção marcada.

• Crud: essa opção serve para determinar os campos exibidos no formulário de inserção ou edição da Grade.

• Requerido: não permite que o usuário deixe esse campo em branco ao editar ou adicionar um registro.

Adição/edição de Colunas

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:

Open

Opções da caixa de seleção Tipos de Coluna:

• Link customizado: adiciona links com rótulo e evento customizados pelo usuário:

  • Cabeçalho: título apresentado no cabeçalho da coluna na grade (permite internacionalização);

  • Rótulo: insere um rótulo (label) no link (permite internacionalização);