RadMenu in a Publishing Site Collection and root menu node issue

[Altori Couk]

I'm looking at using the RadMenu in a SharePoint (MOSS) publishing site.  I've followed the white paper and have got the menu integrated with some success using SharePoint Designer to modify my master page.  However the menu does not display/behave the same as the standard ASP.NET menu control does due to the datasource's structure.

For example, my site collection is called 'Intranet' (and this is the top level site) and I have the following sub-sites created beneath it:

• Subsite 1 (with its own subsites or pages)
• Subsite 2 (with its own subsites or pages)
• Subsite 3 (with its own subsites or pages)

Following the white paper, I get a horizontal menu showing only the three subsites on the menu bar, and then their subsites pop-up as drop down menus.  This part is fine, but the Top level site 'Intranet' is missing from the navigation.  This appears to be the same behaviour as seen in the BlueBand.master which the white paper is based on, however I'm wanting to get the same behaviour as can be seen in the default.master where the horizontal menu would show:  Intranet, Subsite 1, Subsite 2, Subsite 3.

Question 1: How can this be achieved?  Note that in SharePoint the 'Intranet' node shown first can be replaced by other sub-sites as you travel deeper into the site hierarchy if you have configured the Navigation for a sub-site to "Display only the navigation items below the current site".

I was able to hack around a bit in SharePoint designer and got the behaviour I was after using two controls.  While this works it does not seem the best solution and I suffer from another problem.  Here is the hack:

<PublishingNavigation:PortalSiteMapDataSource ID="siteMapDataSource1" Runat="server"
    SiteMapProvider="CombinedNavSiteMapProvider" EnableViewState="true"
    StartFromCurrentNode="true" StartingNodeOffset="0" ShowStartingNode="false"
    TreatStartingNodeAsCurrent="true" TrimNonCurrentTypes="Heading"/>
<PublishingNavigation:PortalSiteMapDataSource ID="siteMapDataSource2" Runat="server"
    SiteMapProvider="CombinedNavSiteMapProvider" EnableViewState="true"
    StartFromCurrentNode="true" StartingNodeOffset="0" ShowStartingNode="true"
    TreatStartingNodeAsCurrent="true" TrimNonCurrentTypes="Heading"/>

    <telerik:RadMenu ID="RadMenuHome" runat="server" DataSourceID="siteMapDataSource2"
        Skin="Interserve" EnableEmbeddedSkins="false" MaxDataBindDepth="1"
        Flow="Horizontal" DefaultGroupSettings-Flow="Vertical"/>
    <telerik:RadMenu ID="RadMenu1" runat="server" DataSourceID="siteMapDataSource1"
        Skin="Interserve" EnableEmbeddedSkins="false" MaxDataBindDepth="4"
        Flow="Horizontal" DefaultGroupSettings-Flow="Vertical"/>

I duplicated the PortalSiteMapDataSouce and set the ShowStartingNode = true and then placed two RadMenu's side by side, the first showing just one level (this exposes the 'Intranet' node I was missing) and the second showing the Subsite 1 to 3 menu nodes next to it.  With a bit of CSS tweaking, to the user it looks like one menu bar but importantly all four menu items are present.

The problem I get with this however is that when the number of menu items shown on the menu bar is wider than the browser window, the excess menu items wrap around below on to the next line.  If I set a width on the RadMenu's I can limit the effect so it cuts them off instead of wrapping around to the next line - my preferred behaviour.  However I do not know what width to set as the website uses a liquid layout.  Putting in width="100%" forces the second RadMenu to be pushed to the next line and anything less will cause a gap or a push to the next line depending upon the size of the first RadMenu to it's left.

Also, I can use a CSS style to set overflow to hidden, but then the drop down menus are also hidden.  So far I can not see how to resolve this problem.

Question 2: Is there any other way, using the hack above, to stop the second RadMenu's items from wrapping around on to the second line when the browser window is not wide enough to display them all on a single line?

You may probably ask why I don't just do the following:

<PublishingNavigation:PortalSiteMapDataSource ID="siteMapDataSource1" Runat="server"
    SiteMapProvider="CombinedNavSiteMapProvider" EnableViewState="true"
    StartFromCurrentNode="true" StartingNodeOffset="0" ShowStartingNode="true"
    TreatStartingNodeAsCurrent="true" TrimNonCurrentTypes="Heading"/>

<telerik:RadMenu ID="RadMenu1" runat="server" DataSourceID="siteMapDataSource1"
    Skin="Interserve" EnableEmbeddedSkins="false" MaxDataBindDepth="4"
    Flow="Horizontal" DefaultGroupSettings-Flow="Vertical"/>

Where I set the ShowStartingNode to true, then use just one RadMenu to display it?  If you try this, the RadMenu will display just one menu item on the horizontal bar, 'Intranet', and this will have the three subsites as drop down menus.

I've been looking at this all day and I fear I am missing the obvious, case of wood and trees. :)  Can you help?

[Dimitar Milushev]

Hi Altori Couk,

You are not missing something obvious - the default behavior of the MOSS navigation is hardcoded and PortalSiteMapDataSource actually returns the hierarchy you see in your second example.

The easiest way to achieve behavior similar to the default would be to include some C# code (either in a code-behind file or in a <script runat="server">) and handle the Menu's DataBound event. In the event handler you can move the children of the "Intranet" root item to the top level. While this approach would require including code in the page, it only needs a single RadMenu and a single PortalSiteMapDataSource to work.

Let me know if this is a viable approach in your scenario and if you need help implementing it.

Sincerely yours,
Dimitar Milushev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Altori Couk]

That sounds ideal.  I know I can put some code in a user control which is hosted in the controltemplates folder of the 12 hive so I could put the menu control in there and a script tag, but I am not sure how to manipulate the data in the databound event.  Could you show some code that would do that?

[Altori Couk]

Hi Dimitar, have you had chance to take a look at this?

[Peter]

Hi Altori,

Please, try the following code:

protected void RadMenu1_DataBound(object sender, EventArgs e)
   {
       RadMenu menu1 = sender as RadMenu;
       foreach (RadMenuItem currentItem in menu1.GetAllItems())
       {
           if (currentItem.Text == "Intranet")
           {
               foreach (RadMenuItem childItem in currentItem.Items)
               {
                   menu1.Items.Add(childItem.Clone());
               }
               currentItem.Items.Clear();
           }
       }
   }

Kind regards,
Peter
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.