Função

A grade é um componente 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árias fontes de dados, adicionar diversas funcionalidades pré-configuradas ou criadas pelo desenvolvedor.

Uso

A grade pode ser usado como uma simples tabela ou para um CRUD com diversas funcionalidades. Por sua versatilidade, esse componente pode ser adaptado a 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 retorna a ordenação configurada na fonte de dados. Quando a coluna é ordenada, além de exibir setas (↑ e ↓) ao lado do título no cabeçalho, fica em um tom mais escuro destacando qual coluna está ordenando toda a grade (coluna "EMAIL" 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 simbolo do filtro fica em destaque na coluna filtrada;
5. Coluna eventos da linha: os botões editar e excluir( item (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 de avanço e retorno de página e seleção numeração das páginas;
7. Itens por página: seleciona a quantidade de páginas a ser visualizada por vez. Esse valor é definido na propriedade "Linhas por página" da fonte de dados;
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.

Figura 1.2 - Filtro sendo adicionando na coluna NOMEPRODUTO

Principais propriedades

Configurações

A propriedade Configurações abre a janela de Opções da Grade, nela realizamos praticamente todas as customizações da grade.

No item (1) da Figura 2.1, temos a área de detalhes com o Master (principal e que não pode ser excluído) e o Novo (criado como exemplo). Cada detalhe pode ser responsável por personalizar uma grade, sendo possível definir Modelos (2) e as configurações das abas (3) para cada uma delas ou vincular duas fontes de dados a uma mesma grade. Com os detalhes é possível adicionar uma subgrade a uma grade, permitindo por exemplo que em uma grade de funcionário, cada linha tenha uma subgrade com os seus dependentes ou, ao invés de exibir uma subgrade com a lista de dependentes, criar uma nova coluna com o número total de dependentes de cada funcionário, dado que seria obtido em um detalhe distinto e vinculado a Master.

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

1. Detalhes: permite selecionar cada detalhe e configurá-los separadamente, além de adicionar e remover detalhes. O Master não pode ser removido.
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 das abas.

Aba Geral

A aba Geral (item (3) da Figura 1.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 na view, cria 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;
• Editável: informa se os itens poderão ser editáveis e como ocorrerá essa edição. As possibilidades são:
  1. Não: não é possível editar ou excluir itens da grade e os botões são ocultos da grade;
  2. Em linha: a adição ou edição ocorre na própria linha da grade;
  3. Pop up: um pop é 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 na view, 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 na view, dessa forma o usuário pode personalizar a edição de item.
• Permite selecionar linha: quando habilitado, ao clica em uma linha a mesma ficará marcada após o cursor do mouse não está mais em cima do item.

Aba Exibição

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

1. Permitir paginar: adiciona elementos de paginação no final da grade (itens (6) da Figura 1.1);
2. Permitir ordenar: possibilita ordenar a grade utilizando uma coluna selecionada (item (3) da Figura 1.1);
3. Permitir agrupar: gera agrupamento das colunas selecionadas. O agrupamento ocorre quando o cabeçalho de uma das coluna é clicado e arrastado para a área logo acima do cabeçalho (item (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 (item (9) da Figura 1.1);
5. Permitir seleção do total de registros a exibir: exibe o seletor de registro por páginas (item (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 conteúdo na área de título e alterar o template da grade.

Figura 2.3 - Aba responsável por editar a barra de título da grade

1. Tipo: lista todos os tipos de itens que já foram inseridos na grade;
2. Descrição: informa o que esse tipo de item faz;
3. Edição: abre a janela Barra de ferramentas para edição desse conteúdo;
4. Excluir: apaga o item selecionado;
5. Adiciona Item: abre a janela de Barra de ferramentas para adicionar novo item;
6. Tipo de item: seleciona o tipo de item a ser inserido. O conteúdo destacado no item (7) é alterado de acordo a seleção do campo Tipo de item, as opção são:
   • Botão nativo: adiciona botões pré configurados da grade. são eles: Exportar para Excel; Exportar para PDF e Adicionar (Registro) que inclui novo item na grade. Por padrão o botão Adicionar (Registro) já é criado ao dar permissão de inserção à grade;
   • Título: insere um título à grade com ou sem internacionalização;
   • Template: exibe um editor de texto para inserção de template personalizado pelo usuário;
   • Botão customizado: permite inserir um botão personalizado com Label (permite internacionalização), ícone e evento. O evento pode ser uma expressão, um bloco de programação, relatório ou abrir uma view.

Aba Colunas

Essa aba nos mostra uma tabela representando as colunas da grade para personalização, as colunas de conteúdo habilitável (Ordenável, Pesquisável, Listagem, Crud e Requerido) podem ser configurados na própria tabela (clicando no X para habilitar ou desabilitar), para os demais itens é necessário acessar o botão de edição da coluna (item (3) da Figura 2.3).

A personalização das colunas nos permite, por exemplo, exibir o conteúdo de fontes de dados distinta em cada coluna ou adicionar botões de eventos.

Figura 2.4 - Aba de customização das colunas da grade

1. (botões) Ordenadores: altera a posição da coluna selecionada na grade;
2. Edição: abre a janela Coluna para personalizar a coluna selecionada;
3. Excluir: apaga a coluna selecionada;

• (botão) Remover colunas: exclui todas as colunas listadas da grade;
• (botão) Obter colunas da fonte de dados: recupera todas as colunas excluídas e que fazem parte da fonte de dados;
• (botão) Adiciona 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 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 ajusta a página;
• Ordenável: permite ordenar a grade utilizando a coluna selecionada. A opção "Permitir ordenação" da aba Exibição deve está selecionado;
• Pesquisável: define as colunas que serão consulta na pesquisa do usuário;
• Listagem: só serão listados na grade os campos que possuem essa opção marcada;
• Crud: quando desabilitado, a coluna não será exibida na listagem da grade, edição e adição;
• Requerido: não permite que o usuário deixe esse campo em branco ao editar ou adicionar um registro.

Janela Coluna

A janela Coluna é exibida ao clicarmos  nos botões Adicionar coluna ou Edição (item (2) da Figura 2.4) na aba Colunas de edição da grade. Nela podemos definir três tipos de colunas para a grade:

• Botão de comando, são botões pré configurados de exclusão e/ou edição do registro na grade e possui os seguintes campos:
  1. Selecione o tipo: define quais os botões que aparecerão na coluna, a forma como ocorrerá a edição (linha ou pop-up) é definido na aba Geral no campo Editável. As opção são: Editar; Excluir e Editar/Excluir;
  2. Cabeçalho: título apresentado no cabeçalho da coluna na grade (permite internacionalização);
  3. Largura: define a largura da coluna, informar o valor e a métrica (px, cm, % ...). Não informando valores, a coluna se ajusta a página;
• Botão customizado, adiciona botões com nome, ícone, tamanho e evento customizados pelo usuário:
  1. Cabeçalho: título apresentado no cabeçalho da coluna na grade (permite internacionalização);
  2. Ícone: insere o ícone selecionado ao lado do label do botão;
  3. Largura: define a largura da coluna, informar o valor e a métrica (px, cm, % ...). Não informando valores, a coluna se ajusta a página;
  4. Executar: abre a janela de configuração de evento que permite adicionar uma expressão, bloco de programação, relatório ou formulário;
• Banco de dados, Seleciona os campos da fonte de dados integrado com o banco. Colunas do tipo Banco de dados possui a aba Sumário, que permite adicionar somatório, média, maior e menor registro, contagem no final da coluna ou no agrupamento.
  1. Campo: seleção do campo da fonte de dados;
  2. Campo exibição: seleciona o campo que será exibido na listagem;
  3. Cabeçalho: título apresentado no cabeçalho da coluna na grade (permite internacionalização);
  4. Tipo: seleciona o tipo do campo no banco de dados;
  5. Largura: define a largura da coluna, informar o valor e a métrica (px, cm, % ...). Não informando valores, a coluna se ajusta a página;
  6. Mascara ({0:d}): define uma mascara ao valor;
  7. Tipo de Campo: tipo do campo que será exibido na grade;
  8. Ordenável: permite ordenar a grade utilizando a coluna selecionada. A opção "Permitir ordenação" da aba Exibição deve está selecionado;
  9. Pesquisável: define as colunas que serão consulta na pesquisa do usuário;
  10. Visível na listagem: só serão listados na grade os campos que possuem essa opção marcada;
  11. Visível no Crud: quando desabilitado, a coluna não será exibida na listagem da grade, edição e adição;
  12. Requerido: não permite que o usuário deixe esse campo em branco ao editar ou adicionar um registro.