←

→

ListView and GroupTemplate Example

August 6th, 2007 | ASP.NET

A quick example on how to use the new GroupTemplate which is being featured by the new ListView Control of the .NET Framework v3.5.

The ListView templates follow a strong hierarchy:

LayoutTemplate [root item, container for ListView rendering]

  • GroupTemplate [Optional, required for tiled layout]
  • >> ItemTemplate
  • >> AlternatingItemTemplate
  • >> EditItemTemplate
  • >> InsertItemTemplate
  • >> ItemSeparatorTemplate
  • >> EmptyItemTemplate
  • >> SelectedItemTemplate
  • GroupSeparatorTemplate

and finally the EmptyDataTemplate (optional), which is only being displayed when there are no results for the DataSource. To be able to use the GroupTemplate you have to set a groupContainer and put the layoutTemplate inside the GroupTemplate Tag.

<asp:LinqDataSource ID=”LinqDataSource1″ runat=”server”
ContextTypeName=”DataClassesDataContext” TableName=”pics”>
</asp:LinqDataSource><asp:ListView ID=”ListView1″ runat=”server” DataKeyNames=”picID” DataSourceID=”LinqDataSource1″ ItemContainerID=”layoutTemplate” GroupItemCount=”2″>
<Layouttemplate>
<table id=”groupContainer” runat=”server”></table>
</Layouttemplate>
<GroupTemplate>
<tr id=”layoutTemplate” runat=”server”>
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<a href=”<%# Eval(“picFileName”) %>”> a <%# Eval(“aspnet_User.UserName”) %></a>
</td>
</ItemTemplate>
</asp:ListView>

By using the GroupTemplate you can produce tiled layouts which are e.g. needed for Image Galleries. However, as stated earlier you can only set a GroupItemCount at the moment, it would be great if we could get more options here for the final Release.

Side note:
The GroupSeparatorTemplate is displayed at the end of each GroupTemplate except the last one. The ItemSeparatorTemplate is displayed at the end of each ItemTemplate except the last one. The EmptyItemTemplate is displayed for filling up dummy columns when e.g. building a xhtml layout.

0 comments ↓

There are no comments yet...Kick things off by filling out the form below.

Leave a Comment