TreeGrid: Parte 2 - ASP.NET

Esse post não será mais atualizado nesse blog. Para visualizar esse post em seu novo endereço, acesse:
http://milaneze.com.br/post/2011/04/24/TreeGrid-Parte-2-ASPNET.aspx


No post anterior eu mostrei como deve ser o HTML retornado para o cliente para que o JavaScript crie a grid em árvore. Nesse post irei deixar para download três exemplos em ASP.NET para fazer essa tarefa, dependendo de como deseja-se o resultado e de como os dados estão sendo passados.

O primeiro exemplo é ideal para quando existem poucos níveis, pois obriga a criar um LinkButton para cada coluna que houver quebra. Ele também obriga a criação de uma coluna a mais informando o nível atual de quebra, que deve ser retornada do banco de dados ou então deve ser usada alguma lógica para retornar esse nível no programa. O programa do exemplo não acessa banco de dados, pois foi criada uma lista genérica com uma simulação de dados para popular o GridView.

Para o segundo exemplo não é necessário que seja retornada mais uma coluna para o nível, mas é necessário que para cada quebra de nível seja retornado NULL do banco de dados na coluna do próximo nível. Por exemplo: "NIVEL1; NIVEL2; NULL;" significa que nada será mostrado na coluna do nível 3. Outro fator é que os dados precisam ser repetidos, assim o código vai encontrar onde está a quebra quando não houver mais repetição. Por exemplo:

NIVEL1; NULL; NULL;
NIVEL1; NIVEL2; NULL;
NIVEL1; NIVEL2; NIVEL3;

O terceiro exemplo é igual no código de tratamento do GridView, porém a lógica de criar uma linha a mais com a coluna NULL fica por conta do .NET e não da mais da query.

Para o segundo e o terceiro exemplo, é usado o banco de dados Northwind. É necessário alterar a ConnectionString no web.config para o servidor correto. As queries estão na pasta Queries.

Os exemplos desse post são apenas idéias, mas existem diversas possibilidades. Eu mesmo já usei outras idéias para gerar o mesmo resultado.

TreeGrid: Parte 1 - HTML

Esse post não será mais atualizado nesse blog. Para visualizar esse post em seu novo endereço, acesse:
http://milaneze.com.br/post/2011/04/22/TreeGrid-Parte-1-HTML.aspx


Tive que fazer no trabalho uma grid que tivesse a possibilidade de ser feito um drill down, para mostrar detalhes de uma determinada área. Seria como um GridView com aspecto de TreeView.

Cheguei a pesquisar um pouco sobre o assunto e cheguei a achar alguns exemplos legais, mas que não eram exatamente o que eu precisava (esse, por exemplo: http://www.obout.com/t2/ex_columns_aligned.aspx). Resolvi, então, treinar um pouco o JavaScript com JQuery que já estava um pouco enferrujado e fiz um código do início. A idéia era que esse código processasse a tabela em HTML resultante da GridView. Isso significa que o código em JavaScript pode ser usado independente da linguagem usada no server, como ASP.NET, PHP, ASP, etc (isso parece óbvio pra quem entende, mas só pra detalhar mesmo).

Observando o código HTML disponível no final do artigo é possível entender o que fazer com o código do lado servidor para obter uma tabela com os mesmos estilos (CSS) que a mostrada, para que então o JavaScript faça seu trabalho. A tabela no código HTML deve conter:

• Classe CSS "treegrid" na tag da tabela ("table");
• Cada linha ("tr") ) deve conter uma classe que identifique seu nível na hierarquia da árvore ("nivel-1" para o primeiro nível, por exemplo);
• Hyperlink ("a") com o texto em branco e a classe "mostrar-esconder" na célula em que desejar mostrar o sinal de + ou - para dar o expand ou collapse da árvore;
• Caso queira que algum nível fique amostra ao iniciar, é possível atribuir a classe CSS "mostrando" à tag "tr" e então um nível abaixo a esse será mostrado por padrão, na inicialização da página.

Código para download: http://dl.dropbox.com/u/20361010/blog/treegrid/treegrid_html01.rar

Nos próximos posts, vou mostrar exemplos para o código no lado servidor, dependendo de como os dados estiverem disponíveis e da forma que se deseja mostrar.