RadMenu with PortalSiteMapDataSource

[Richelle Dubif]

Hi

I'm trying to implement the RadMenu so it works in a similar way to the ASP menu that comes with MOSS by default.  I've had some success, but one problem is that the PortalSiteMapDatasSource (sitemapprovider = CombinedNavSiteMapProvider) returns a parent node for the current SharePoint site (dependant upon how you configure your Global site sections under Site Actions - Modify Navigation) and then places all navigation within that site as child nodes beneath it. 

Swap the ASP menu with the Telerik RadMenu and all of a sudden I get one menu item on the menu bar with a drop down containing the items that should be on the root level of the menu.  It appears that the SharePoint ASP menu combines the first two levels together but RadMenu does not.

        <MyCo:MOSSRadMenu id="mossRadMenu" runat="server"
         AppendDataBoundItems="false"
         MaxDataBindDepth="5"
         DataSourceId="siteMapDataSource1"
         CollapseDelay="500"
         EnableViewState="false"
         EnableEmbeddedSkins="false"></MyCo:MOSSRadMenu>

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

I can stop this happening in the RadMenu by changing the ShowStartingNode attribute of the PortalSiteMapDataSource to "false", however then the root SharePoint site node disappears from the menu.  So I do not want to do that.

Using some code, I was able to move the first level child nodes up one level and this almost works ...

        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);

            // Bring the sub-items up to the main level
            RadMenuItem[] mArray = new RadMenuItem[this.Items[0].Items.Count];
            this.Items[0].Items.CopyTo(mArray, 0); // Get items of next level down
            this.Items[0].Items.Clear(); // clear these items
            this.Items.AddRange(mArray); // paste them at the root level

        }

... the RadMenu now looks just like the ASP menu, the problem I am left with is that when I am at the root site, the first node on the menu (the site root) is styled to be selected - that is what I want.  However when I navigate to another page or site that now appears on the same level of the navigation it will become selected also (again what I want) but the first node (the site root) is still selected - I don't want this to be selected.

For example, if my sharepoint sites look like this:

Portal  (Parent root site)

• Site 1   (child site)
• Site 2   (child site)

 

Which creates the navigation (with the code modification above) in SharePoint as:

[ Portal ] | Site 1 | Site 2

When on the Portal root site (the welcome page for Portal), then Portal is styled to show it as selected. 

eg (where [ ] denotes the menu item that is styled as selected):

 
 
[ Portal ] | Site 1 | Site 2 
 
However when on Site 1, both Site 1 and Portal are styled to show they are both selected.  I want only SIte 1 to be selected in this instance.

eg, this is how it currently is rendered:
 

 

[ Portal ] | [ Site 1 ] | Site 2

 

When I walk through the nodes (In the OnPreRender event) the Selected property is always false so it seems it is not here that the RadMenu is deciding what nodes are selected?

Where / how do I control what nodes in my RadMenu are selected when used in a SharePoint MOSS Publishing site?

[Richelle Dubif]

Looking into the HTML produced, the CSS class it is assigning to the <a> element is rmFocused.  I've exhausted everything I can think of to extinguish the duplicate rmFocused classes from the server side code while I have the modification to merge the top two menu navigation tiers.  I fear I may have to hack in a client side solution which I'd prefer not to have to do.

Any suggestions?

[Richelle Dubif]

Any help on this?

protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);

// Bring the sub-items up to the main level
RadMenuItem[] mArray = new RadMenuItem[this.Items[0].Items.Count];
this.Items[0].Items.CopyTo(mArray, 0); // Get items of next level down
this.Items[0].Items.Clear(); // clear these items
this.Items.AddRange(mArray); // paste them at the root level

}

By moving the first child layer up to the root layer so that RadMenu works the same as the MOSS ASP menu (with the way SharePoint presents its site map provider), I can end up with two unwanted menu nodes selected on the root (top) menu bar.

The first is the site (typically the root site or the site section start depending upon the navigation config), the second is the sub-site or page that you are viewing.  To make this look better and conform to the same behaviour as the MOSS ASP menu, the first site should not be focussed/selected when there is a second site/page focussed/selected on the menu bar.

I can't find how to control this behaviour server side.  Please help!

[Kalina]

Hi Richelle Dubif,

Could you please be more specific about the version of the SharePoint that you use?
Thank you.

Kind regards,
Kalina
the Telerik team

[Richelle Dubif]

I am using SharePoint 2007 (MOSS), with the Telerik RadMenu on a custom master page (based upon a the minimal master) in a publishing site collection.

This is the client side solution I am using at present (with a bit of jQuery) but you get a brief flash when the page loads with the first menu item marked with the CSS class rmFocussed before it is removed:

 var menu = $(".RadMenu_MyCo a.rmFocused");
 if(menu.size() > 1)
  menu.first().removeClass("rmFocused")

As stated, I would like to find out how, using the modified RadMenu code above, to remove the rmFocused class from the first menu node on the root if there is a second rmFocused class on another node on the root level of the menu on the server side, so I can avoid the less desirable client side solution.

The reason I can get two root level nodes selected as in focus is because the modified RadMenu code moves the second level of menu items up to the first (root) level.

Thanks for your help.

[Kalina]

Hi Richelle Dubif,

Please excuse me for the delayed reply.
As I understand - you are trying to blur a particular RadMenu item at client-side after the control loads.
I am not sure that removing the “rmFocused” class is the proper approach in this scenario.
Let me suggest you use the RadMenu client-side “blur()” and “focus()” methods handling the OnClientLoad event in this manner:

<script type="text/javascript">

    function OnClientLoad(sender) {

        var items = sender.get_items();

        if (items.get_count() > 1) {
            items.getItem(0).blur();
        }
        items.getItem(2).focus(); // focus another item
    }
</script>

<telerik:RadMenu runat="server" ID="RadMenu1"
    OnClientLoad="OnClientLoad">

Please find more details about RadMenu client-side API here.

Regards,
Kalina
the Telerik team

[Richelle Dubif]

Hi Kalina,

Thanks for that information - interesting to know I can do that client-side with the control.  However what I would ideally like to know how to do is to remove that focus on the server side, so that the client side does not receive the HTML initially with a specific node selected.

You see it is because of the server code posted earlier where I move the first child level menu items up to the root level I can end up with two menu items 'in focus' when I only want one to be in focus.  It's purely a cosmetic thing but with the custom skin I am using it looks noticably wrong to have the original root menu item in focus and a newly promoted child item now on the same level also in focus.

The reason I am moving the the child items up one level is so I can emulate the exact same behaviour as the MOSS ASP Menu control when the SharePoint PortalSiteMapDataSource is used with ShowStartingNode="true".

Ideally, if I can fix this at the server side I won't need to run any client side script to turn focus off when the duplicate focus occurs.  Any suggestions?

Thanks.

[Kalina]

Hi Richelle Dubif,

You can try to set the focus to a particular item in RadMenu at server-side by setting its Selected property to “true”.

Kind regards,
Kalina
the Telerik team

[Richelle Dubif]

I had already tried that but had no success.  For example:

 public class MOSSRadMenu : RadMenu
    {
   
        #region Override methods
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            
            // Bring the sub-items up to the main level
            RadMenuItem[] mArray = new RadMenuItem[this.Items[0].Items.Count];
            this.Items[0].Items.CopyTo(mArray, 0); // Get items of next level down
            this.Items[0].Items.Clear(); // clear these items
            this.Items.AddRange(mArray); // paste them at the root level
        }

        protected override void Render(HtmlTextWriter writer)
        {
            SetRootSelectedState(this.Items);
            base.Render(writer);
        }
        #endregion

        #region private methods
        private void SetRootSelectedState(RadMenuItemCollection items)
        {
            RadMenuItem firstItem = null;
            foreach (RadMenuItem item1 in items)
            {
                if (item1.Selected && firstItem == null)
                    firstItem = item1;
                else if (item1.Selected && firstItem != null)
                {
                    firstItem.Selected = false;
                    break;
                }
            }

        }
        #endregion
    }

In the SetRootSelectedState method, I walk through the top level menu items and the selected property is always false, yet when rendered on the client there are two menu items selected (they have the rmFocused class).  A reminder, the reason two are selected is that I move the first child level items up to the root level.  See my earlier posts about the data source I've used in the the SharePoint masterpage.

What am I doing wrong?

[Kalina]

Hi Richelle Dubif,

Have you tried to blur the RadMenuItem that initially gets focused on client-side as I have suggested you?

Best wishes,
Kalina
the Telerik team

[Richelle Dubif]

Yes, the client side solution works ... as per my first post I am looking for a server side solution (if possible).

Thanks.

[Kalina]

Hi Richelle Dubif,

I am afraid that the scenario that you are trying to implement is rather custom and I am not sure that there is a server-side approach that you can use.

Kind regards,
Kalina
the Telerik team