Agrupando dados no controle ListView


No ASP.NET 1x e ASP.NET 2.o  datalist era o controle primário para exibir dados em grupo.No ASP.NET 3.5 nós temos um novo controle que toma conta dos dados agrupados.Neste artigo vou mostrar como agrupar dados usando o controle ListView.

O banco

Nosos banco consiste em duas tabelas,Customers e Orders .O diagrama do banco é mostrado abaixo:

A tabela Customers tem uma relação de um para muitos com a tabela Orders.Isso significa que um único comprador pode ter muitos pedidos.

Bind dos dados no ListView

Existem muitas maneiras de trazer os dados do banco,vou usar Linq to Sql como a camada de Acesso aos dados (DAL),mas sinta-se a vontade para mudar esse método.O código a seguir busca os dados no banco da tabela Customers e atribui estes para o ListView:

private void BindData()
{
using(var db = new NorthwindDataContext())
{
lvCustomerProducts.DataSource = from c in db.Customers
select c;
vlvCustomerProducts.DataBind();
}

}

Criando o controle ListView

Agora é hora e criar o controle ListView.Como nós precisamos agrupar os itens vamos usar o GroupTemplate quando formos especificar a estrutura dos itens.O ListView também tem a propriedade GroupItemCount que representa o número de itens agrupados.Primeiramente de uma olhada na implementação do ItemTemplate:

<asp:ListView ID=”lvCustomerProducts” ItemPlaceholderID=”itemPlaceHolder” GroupPlaceholderID=”groupPlaceHolder” runat=”server” GroupItemCount=”3″>

<LayoutTemplate>

<table>
<tr>
<td>
<table cellpadding=”15″>
<asp:PlaceHolder ID=”groupPlaceHolder” runat=”server”></asp:PlaceHolder>
</table>
</td>
</tr>
</table>

</LayoutTemplate>

</ListView>

O LayoutTemplate representa a estrutura geral do ListView.Este consiste no controle PlaceHolder que pode ser substituído pelo HTML contido no GroupTemplate.O GroupPlaceHolderID é também especificado no ListView.

O GroupTemplate usa um controle PlaceHolder que é mais tarde substituído pelo ItemTemplate.Você pode considerar o GroupTemplate como uma seção que mostra os dados na verdade utilizando o ItemTemplate.Entretanto você pode também editar o GroupTemplate.Aqui segue a implementação do GroupTemplate:

<GroupTemplate>

<tr>

<asp:PlaceHolder ID=”itemPlaceHolder” runat=”server”>
</asp:PlaceHolder>

</tr>

</GroupTemplate>

O itemPlaceHolder será substituído pelo conteúdo do ItemTemplate.A implementação do ItemTemplate segue abaixo:

<ItemTemplate>
<td>
<h3><%# Eval(“FirstName”) %> <%# Eval(“LastName”) %> </h3>

<asp:GridView BorderStyle=”None” ID=”gvProducts” AutoGenerateColumns=”false” runat=”server” DataSource = ‘<%# Eval(“Orders”) %>’>

<Columns>

<asp:BoundField DataField = “OrderName” HeaderText=”Order Name” />
<asp:BoundField DataField = “Quantity” HeaderText = “Quantity” />

</Columns>

<EmptyDataTemplate>
<div style=”background-color:lightgray”>No orders exists!</div>
</EmptyDataTemplate>

</asp:GridView>

</td>

</ItemTemplate>

Eu usei um controle GridView em separado pra mostrar os produtos do comprador.O comprador que não tiver produtos associados,com ele terá o EmptyDataTemplate mostrado em seu lugar.

O efeito obtido é mostrado abaixo:

Conclusão

Neste artigo nós aprendemos a usar o GroupItemTemplate uma caracteristica do controle ListView.O GroupTemplate permite mostrar os dados em pequenas seções especificadas pela propriedade GroupItemCount do controle ListView.

Valeu até a próxima!

Links:
Mais sobre o controle ListView

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s