ASP.NET ListView and GroupTemplate
Posted on August 31, 2010 by Frederik Vig in ASP.NET, Code SnippetThe other day I was building a mega menu for a customer – one of the requirements was to let the editor choose the number of columns of links to display. This turned out be quite easy with ASP.NET’s ListView control.
Here’s the code I ended up with.
<asp:ListView runat="server" ID="Menu" ItemPlaceholderID="itemContainer" GroupPlaceholderID="groupContainer"> <LayoutTemplate> <div class="mega-menu"> <asp:PlaceHolder runat="server" ID="groupContainer" /> </div> </LayoutTemplate> <GroupTemplate> <ul> <asp:PlaceHolder runat="server" ID="itemContainer" /> </ul> </GroupTemplate> <ItemTemplate> <li> <EPiServer:Property runat="server" PropertyName="PageLink" DisplayMissingMessage="false" /> </li> </ItemTemplate> </asp:ListView> |
I could then use the GroupItemCount property to set the number of items to display in each list.
protected override void OnLoad(EventArgs e) { base.OnLoad(e); if (this.ParentPage == null) { return; } this.SetupMenu(); } private void SetupMenu() { PageDataCollection children = this.ParentPage.GetChildren(); children.FilterForVisitor(); children.FilterCompareTo("PageVisibleInMenu", "true"); this.ItemsInColumn(); this.Menu.DataSource = children; this.Menu.DataBind(); } private void ItemsInColumn() { if (ParentPage.IsValue("MegaMenuLinksInColumn")) { this.Menu.GroupItemCount = (int)ParentPage["MegaMenuLinksInColumn"]; } else { this.Menu.GroupItemCount = 4; } } |
As you can see the trick was to use the GroupItemCount together with GroupTemplate.
The markup rendered looked something like this.
<div class="mega-menu"> <ul> <li><a href="/Medlem/Kjopeutbytte/">Kjøpeutbytte</a> </li> <li><a href="/Medlem/Min-side/">Min side</a> </li> <li><a href="/Medlem/Sporsmal-og-svar/">Spørsmål og svar</a> </li> <li><a href="/Medlem/Samtykker/">Samtykker</a> </li> </ul> <ul> <li><a href="/Medlem/Medlemsrabatter/">Medlemsrabatter</a> </li> <li><a href="/Medlem/Samarbeidspartnere/">Samarbeidspartnere</a> </li> <li><a href="/Medlem/Medlemsinformasjon/">Medlemsinformasjon</a> </li> <li><a href="/Medlem/Bli-medlem/">Bli medlem</a> </li> </ul> <ul> <li><a href="/Medlem/Medlemskupp/">Medlemskupp</a> </li> </ul> </div> |
Discussion · No Comments
There are no responses to "ASP.NET ListView and GroupTemplate". Comments are closed for this post.Oops! Sorry, comments are closed at this time. Please try again later.