PageTree CSS

Chris Moses

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

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

Chris Moses

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

Per Nergård

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

Chris Moses

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