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

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" 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 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;
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

Âncora
propConfiguracoes propConfiguracoes

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.

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 detalhe Novo (criado nesse exemplo). Para cada detalhe selecionado é possível configurar o campo Modelos (2) e as abas de configuração (3), vinculado a fontes de dados distintas para criar subgrades. Veja mais no tópico Mestre detalhe.

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 adicionar, excluir e selecionar cada detalhe para configurá-los separadamente. 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 de suas abas.

Âncora
abaGeral abaGeral

Aba Geral

A aba Geral (item (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 na view, 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: 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 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 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 formulário 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á em destaque:
  1. Simples: seleciona apenas uma linha. É a opção default do campo;
  2. Múltipla: seleciona mais de uma linha. Utiliza-se juntamente com a coluna Checkbox de seleção.
• Obter valor do campo como: define como o valor será retornado, podendo ser:
  • Chave: essa opção faz com que somente os pares chave / valor quando há mais de um ID e somente o valor quando existe um único ID;
  • Objeto: essa opção faz com que todos os dados dos registros sejam retornados - ele é o valor padrão desse campo.
• Salvar em lote: ao seleciona-lo, faz com que os dados inseridos sejam salvos 
• Ocultar botões de edição no Pop up customizado: ao selecioná-lo, oculta os botões padrões de edição. Esse campo somente é habilitado quando a opção Pop up customizado é selecionado em Editável.

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 ao clicar no cabeçalho de uma das colunas e arrastar 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 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

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 do item selecionado;
4. Excluir: apaga o item selecionado;
5. Adiciona Item: abre a janela Barra de ferramentas para adicionar novo item;
6. Tipo de item: seleciona o tipo de item a ser inserido. O conteúdo destacado na área (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 recurso extra personalizado, utilizando HTML e CSS;
   • 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 um novo formulário view. Na área (1) da Figura 1.1 existe o botão Imprimir, este não é padrão da grade, mas foi criado como exemplo.

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 conteúdo habilitável (Ordenável, Pesquisável, Listagem, Crud e Requerido) que podem ser configurados na própria tabela (clicando no X para habilitar ou desabilitar) e botões de edição e exclusão de cada coluna da Grade (itens (2) e (3) da Figura 2.4).

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.

Image Modified
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 da Grade selecionada;
3. Excluir: apaga a coluna da Grade selecionada;

• (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: 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, 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 ordenar a grade utilizando a coluna selecionada. A opção "Permitir ordenação" da aba Exibição deve está selecionada;
• 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: essa opção serve para determinar a apresentação dos campos exibidos no popup padrão da Grade;
• Requerido: não permite que o usuário deixe esse campo em branco ao editar ou adicionar um registro.

Âncora
janelaColuna janelaColuna

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:

Figura 2.5 - Configuração da aba Geral do tipo de coluna Banco de dados

• 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);
  • Executar: abre a janela de configuração de evento que permite adicionar uma expressão, bloco de programação, relatório ou abrir um formulário view;
    
  • Checkbox de seleção: adiciona uma coluna de seleção. Ele é complemento de quando a permissão de selecionar linha é múltipla;
• 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:
  • 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;
  • 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;
• Botão customizado, adiciona botões com nome, ícone, tamanho e evento customizados pelo usuário:
  • Cabeçalho: título apresentado no cabeçalho da coluna na grade (permite internacionalização);
  • Ícone: insere o ícone selecionado ao lado do rótulo (label) do botã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;
  • Executar: abre a janela de configuração de evento que permite adicionar uma expressão, bloco de programação, relatório ou formulário view;
• Banco de dados, (Figura 2.5) 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, contagem, maior e menor registro no final da coluna ou do agrupamento.
  1. Aba sumário: Adiciona um sumário tanto para o agrupamento, quanto para todo o conteúdo da coluna. É possível exibir a média dos valores, mínimo, máximo, soma e a quantidade desses valores;
  2. Campo: seleção do campo da fonte de dados usado;
  3. Campo exibição: seleciona o campo que será exibido na listagem ou deixe vazio para exibir o conteúdo do próprio campo;
  4. Cabeçalho: título apresentado no cabeçalho da coluna na grade (permite internacionalização);
  5. Tipo: informa o tipo do campo que vem da fonte de dados;
  6. 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;
  7. Mascara ({0:d}): define uma mascara ao valor;
  8. Tipo de Campo: tipo do campo que será exibido na grade no momento da adição, edição e em alguns casos na listagem. A maioria desses tipos possuem personalização própria, ao selecionar um tipo o botão lateral "…" é ativo para permitir sua configuração. Os tipos são:
     • Padrão: campo de texto comum;
     • Caixa de seleção: dropdown de conteúdo fixo, alimentada por uma fonte de dados ou valores fixos inserido pelo desenvolvedor.
     • Caixa de seleção dinâmica: dropdown de conteúdo dinâmico, ou seja, uma ação anterior pode variar o conteúdo dessa caixa de seleção. É alimentada por uma fonte de dados.
     • Slider: campo deslizante de valores, permite definir valores fixos para o usuário selecionar um desses valores;
     • Ligar/Desligar: destinado a tipos booleanos, ao clicar ou arrastar seu status é alterado;
     • Data: abre uma caixa com um calendário que pode ser personalizado;
     • Caixa de checagem: destinado a tipos booleanos, é um checkbox comum;
  9. Ordenável: permite ordenar a grade utilizando a coluna selecionada. A opção "Permitir ordenação" da aba Exibição deve está selecionado;
  10. Pesquisável: define as colunas que terão consulta na pesquisa do usuário;
  11. Visível na listagem: só serão listados na grade os campos que possuem essa opção marcada;
  12. Visível no Crud: essa opção exibe os campos que serão exibidos ao editar ou adicionar novo item;
  13. Requerido: não permite que o usuário deixe esse campo em branco ao editar ou adicionar um registro.

Âncora
JanelaRedimensionar JanelaRedimensionar

Redimensionar Colunas

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.

• Dispositivo: Seleciona um dos quatro parâmetros de tamanho de tela
  • Dispositivos grandes, tv's;
  • Desktops;
  • Dispositivos médios, tablets;
  • Dispositivos pequenos, telefones.
• Percentual restante ou Total utilizado: Exibe o espaço entre a grade e as margens direita e esquerda da tela ou exibe o somatório do tamanho das colunas (em pixel).
• Relativo: Exibe o tamanho das colunas em porcentagem.
• Absoluto: Exibe o tamanho das colunas em pixels.
• Colunas que devem ser exibidas: As colunas marcadas serão exibidas no dispositivo selecionado.

Âncora
MestreDetalhe MestreDetalhe

Mestre e detalhe

Através do mestre e detalhe é possível vincular duas ou mais grades com suas respectivas fontes de dados, desde que estas tenham vínculo de FK (chave estrangeira) em suas fontes de dados. É possível configurar e personalizar cada grade de forma distinta.

As duas formas de vincular as grades são:

Grade interna

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

Figura 2.6 - Vinculando o conteúdo da fonte de dados Cidade a Master.

O resultado podemos ver na figura abaixo, ao selecionar um item da grade Estado, sua linha expande exibindo a subgrade Principais cidades.

Figura 2.7 - Grade interna

Grade externa

Para vincular as grades de forma externa, é necessário arrastar 2 grades para o formulário view (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 2.8.

Figura 2.8 - Usando a propriedade Mestre Detalhe para vincular duas grades distintas

Na configuração da Figura 2.8 teremos o resultado mostrado na Figura abaixo. Podemos ver que ao clicar em um item da grade Estado, a grade inferior Principais cidades exibe somente os itens vinculados.

Figura 2.9 - Grade externa