November Happy Hour will be moved to Thursday December 5th.

Sitemap Columns

Vote:
 

Hi, does anyone know how to have multiple columns in the sitemap? I've searched around and can't seem to find a solution.

Basically, the current sitemap is in one longgg list, but I need it spread out in 3 columns.

This is my placeholder:

<asp:Content ID="Content1" ContentPlaceHolderID="SingleColumn1" runat="server">
    <div class="middle_content">
        <h1>
            Sitemap</h1>
        <div class="column1">
            <div class="sitemap_block">
                <ul>
                    <li><asp:HyperLink ID="HomeHyperLink" runat="server" ></asp:HyperLink> </li>
                </ul>
            </div>
            <EPiServer:PageTree runat="server" ExpandAll="true" ID="SiteMapTree" PageLink="<%# IndexRoot %>">
                <HeaderTemplate>
                    <div class="sitemap_block">
                </HeaderTemplate>
                <IndentTemplate>
                    <ul>
                </IndentTemplate>
                <ItemHeaderTemplate>
                    <li>
                </ItemHeaderTemplate>
                <ItemTemplate>
                    <EPiServer:Property ID="Property1" PropertyName="PageLink" runat="server"  />
                </ItemTemplate>
                <ItemFooterTemplate>
                    </li>
                </ItemFooterTemplate>
                <UnindentTemplate>
                    </ul>
                </UnindentTemplate>
                <FooterTemplate>
                    </div>
                </FooterTemplate>
            </EPiServer:PageTree>
        </div>
    </div>
</asp:Content>

And this is my code behind:

public partial class Sitemap : EPiServer.TemplatePage
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //<a href="/ENRC/en-GB/">Home</a>
            PageData startPage = GetPage(PageReference.StartPage);

            HomeHyperLink.NavigateUrl = PageDataUtility.GetFriendlyUrl(startPage);
            HomeHyperLink.Text = PageDataUtility.GetNormalizedStringProperty(startPage, "Heading", false);

        }

        private PageReference _indexRoot;

        /// <summary>
        /// Gets the page used as the root for the site map
        /// </summary>
        /// <remarks>If the IndexRoot page property is not set the start page will be used instead</remarks>
        public PageReference IndexRoot
        {
            get
            {
                if (PageReference.IsNullOrEmpty(_indexRoot))
                {
                    _indexRoot = CurrentPage["IndexRoot"] as PageReference ?? PageReference.StartPage;
                }
                return _indexRoot;
            }
        }

        protected override void OnLoad(System.EventArgs e)
        {
            base.OnLoad(e);

            SiteMapTree.DataBind();
        }

    }

Any help would be hugly appreciated!! 

Thanks in advance 

#44159
Oct 04, 2010 11:38
Vote:
 

The PageTree control is really not useful for displaying information in anything other than, well, a tree layout.

However, if I understand your question correctly, you would like to still use the PageTree control for the sitemap, but style the control so that it looks more like columns. If you look at the HTML markup that the PageTree control produces, you will notice it consists of nested <ul> and <li> elements.

Take this example: http://demo.episerver.com/en/Site-map/
You will see that the CSS required to make the level 2 elements appear as indented, looks something like this: #SiteMap li li a { style here }. The important thing to notice is the way the CSS declaration encompasses the nested <li> tags.

Download FireBug for FireFox to help you inspect HTML and CSS easily. Hope this helps you.

 

#44785
Oct 14, 2010 22:45
Vote:
 

Thanks Arild. Ended up scrapping the whole pagetree thing and done it all in the code behind and it worked.

Cheers!

#45042
Oct 27, 2010 11:27
Vote:
 

Could you explain your solution a bit more?

I have the same issue; Sitemap coded using the pagetree, lots and lots of pages on the site so there's far too much scrolling required if it is all displayed in one column.

I found a good article here explaining various ways to do multicolumn lists, however none of them appear it work brilliantly with a  sitemap structure.

http://www.alistapart.com/articles/multicolumnlists/

Any help greatly appreciated. Thank you.

#50239
Apr 19, 2011 18:35
Vote:
 

Like I said, styling a pagetree sitemap is really just a matter of styling a bunch of <ul>s and <li>s.

This is really more of a frontend-developer question than an EPiServer issue. Take a look at this example:

http://www.jonathansewell.co.uk/index.php/2010/07/11/episerver-pagetree-for-primary-navigation/

#50350
Apr 28, 2011 15:03
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.