Don't miss out Virtual Happy Hour this Friday (April 26).

Try our conversational search powered by Generative AI!

PageTree CSS


Hi guys,

Is it possible to target the first and last elements in a PageTree control? I am trying to render a site menu as such...

    <li class="first">Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li class="last">Item 4</li>

...where I require a "first" CSS class and a "last" CSS class on the first and last items respectively. How would I detect the first and last elements in the control, and update the HTML accordingly? Would I need to attach an "ItemDataBound" or is there another easy way using a function in the code-behind?

Thanks in advance,

Oct 16, 2013 18:12

You could have a look at the source code for ETF at, more specifically the PageTree control:

It has some additional templates you can use to specify custom markup for the first and second items.

Can't get the link to work here, but browse to /TemplateFoundation/Release 1.2/TemplateFoundation/WebControls/PageTree.cs

Or use CSS3 with polyfill scripts for less-than-modern browsers. :)

Edited, Oct 16, 2013 23:43

Thanks Ted.

How do I use that source code? I'm quite new to EPiServer.

Will that source code detect the first and last items? What would the templates be called?

Many thanks,

Oct 17, 2013 15:36

I just want to check that you are building a tree menu and not just a one level menu? 

Oct 17, 2013 17:14

Yea, I'm using a PageTree control to make a complete drop-down menu that will use Javascript to hide/show the drop-downs.

In the end I created a PageDataCollection object onLoad, used the PageTree "GetChildren" function to get a list of menu items and used a "Count" on that to detect whether we were on the last object.

I made a function call inside each of the PageTree templates to do the check.

Oct 18, 2013 11:46
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.