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

Try our conversational search powered by Generative AI!

PageTree CSS

Vote:
 

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

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

...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,
Chris

#76095
Oct 16, 2013 18:12
Ted
Vote:
 

You could have a look at the source code for ETF at http://etf.codeplex.com, more specifically the PageTree control: http://etf.codeplex.com/SourceControl/latest

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. :)

#76103
Edited, Oct 16, 2013 23:43
Vote:
 

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,
Chris

#76134
Oct 17, 2013 15:36
Vote:
 

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

#76141
Oct 17, 2013 17:14
Vote:
 

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.

#76171
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.