HierarchicalGridExtender - Um controle ASP.NET Ajax para adicionar hierarquia aos GridViews

Olá.

Hoje venho apresentar a primeira versão de uma coleção de controles ASP.Net Ajax que pretendo implementar baseado na AjaxControlToolKit e em seu template para desenvolvimento de Extender Controls.

Chamarei esta biblioteca de JPAjaxControlToolKit e distribuirei o código fonte de tudo o que desenvolver.

Nesta primeira versão apresento um controle que chamei de HierarchicalGridExtender que tem por finalidade adicionar o comportamento de grid hierárquico ao controle GridView nativo do ASP.Net. A imagem abaixo resume bem o objetivo deste extender:

Propriedades do HierarchicalGridExtender:

• TargetControlID: ID do objeto Image que deverá responder ao click do mouse e provocar o Collapse e Expand;
  
• PanelToCollapse: ID do objeto Painel que comporta o conteúdo a ser escondido e exibido;
  
• ImageURLCollapsed e ImageURLExpanded: URLs para configurar a imagem em TargetControlID quando o painel estiver escondido e exibido, respectivamente.

Alguns pontos importantes a considerar:

• O HierarchicalGridExtender deve ser colocado em uma coluna do GridView, no caso, uma TemplateField;


• O HierarchicalGridExtender não é um grid para substituir o GridView, ele apenas adiciona um comportamento ao GridView existente na framework. Você não precisa se preocupar em substituir os objetos GridView que já possui em sua aplicação, basta adicioná-lo ao GridView conforme item anterior;


• O HierarchicalGridExtender não é um controle visual. Você pode configurar o seu GridView, Image, Panel e quaisquer outros objetos contidos neste com suas cores, comportamentos e demais recursos existentes, da mesma maneira que faz normalmente;


• O Panel em PanelToCollapse pode conter qualquer conteúdo, inclusive outro GridView, o que permite um design bem interessante como o mostrado na figura abaixo:

A imagem acima representa o uso que dei ao HierarchicalGridExtender em um de nossos sistemas. Como o conteúdo do GridView interno é relacionado a uma linha do GridView externo (o que creio ser padrão na maioria dos casos), eu adotei a seguinte estratégia:

• Faço a consulta de todos os dados montando um DataSet e seus relacionamentos;


• Coloco este DataSet em uma variável local da página;


• No GridView externo faço o bind com a tabela pai;


• No evento RowDataBound do GridView externo eu utilizo os métodos disponibilizados pelo próprio DataSet para retornar os “registros filhos”.

Exemplo:

Dim gvConsultasFilhas As GridView = CType(e.Row.FindControl("gvConsultasFilhas"), GridView)
gvConsultasFilhas.DataSource = _dsConsultasPendentes.FLX_Fluxo.Rows.Find(e.Row.DataItem("FLX_Codigo")).GetChildRows("FluxoFluxoFilho")
gvConsultasFilhas.DataBind()

Você também pode querer ocultar a imagem e desabilitar o HierarchicalGridExtender quando não houver registros filhos.

Exemplo:

If gvConsultasFilhas.Rows.Count = 0 Then
CType(e.Row.FindControl("hgeExpandir"), DPRAjaxControlToolkit.DPRAjaxControlToolkit.HierarchicalGridExtender).Enabled = False
CType(e.Row.FindControl("imgIcone"), WebControls.Image).Visible = False
End If

Estas foram apenas algumas dicas de uso do HierarchicalGridExtender porém, como ele foi projetado para dar total flexibilidade no desenvolvimento, você pode usá-lo de variadas maneiras em diferentes problemas.

Melhorias neste controle podem ser sugeridas. Prometo estudar cada uma e verificar sua viabilidade, porém não garanto a implementação das mesmas nem o prazo para tal, logo fiquem a vontade para modificar o componente. Caso também queiram compartilhar uma melhoria feita no controle, podem contatar-me que terei prazer em adicionar e compartilhar tal melhoria.

Até o próximo post.

Download: www.codeplex.com/jpajaxcontroltoolkit