ASP.NET ListView and GroupTemplate

Posted on August 31, 2010 by Frederik Vig in ASP.NET, Code Snippet

The 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>