RadMenu with PortalSiteMapDataSource

12 posts, 0 answers
  1. Richelle Dubif
    Richelle Dubif avatar
    12 posts
    Member since:
    Mar 2010

    Posted 04 Apr 2011 Link to this post

    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?

  2. Richelle Dubif
    Richelle Dubif avatar
    12 posts
    Member since:
    Mar 2010

    Posted 04 Apr 2011 Link to this post

    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?

  3. Richelle Dubif
    Richelle Dubif avatar
    12 posts
    Member since:
    Mar 2010

    Posted 05 Apr 2011 Link to this post

    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!

  4. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 06 Apr 2011 Link to this post

    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
    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
  5. Richelle Dubif
    Richelle Dubif avatar
    12 posts
    Member since:
    Mar 2010

    Posted 07 Apr 2011 Link to this post

    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.
  6. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 14 Apr 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  7. Richelle Dubif
    Richelle Dubif avatar
    12 posts
    Member since:
    Mar 2010

    Posted 18 Apr 2011 Link to this post

    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.
  8. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 20 Apr 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  9. Richelle Dubif
    Richelle Dubif avatar
    12 posts
    Member since:
    Mar 2010

    Posted 21 Apr 2011 Link to this post

    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?
  10. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 26 Apr 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  11. Richelle Dubif
    Richelle Dubif avatar
    12 posts
    Member since:
    Mar 2010

    Posted 03 May 2011 Link to this post

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

    Thanks.
  12. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 05 May 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top