Item selected with menu in master page

5 posts, 1 answers
  1. lafon Clark
    lafon Clark avatar
    5 posts
    Member since:
    Apr 2010

    Posted 11 Aug 2010 Link to this post

    Hey,
      I've searched the forums for a solution but can't seem to find one that will work.  I have a radmenu in a masterpage and when I go to a page I need the selected item to display an image (a:focus in stylesheet) just like when it's hovered over.  The problem is the master page is refreshed each time a new page is accessed. I tried the code below, but didn't work with the code I have.  Any help would be greatly appreciated. 

    if (!IsPostBack)
            {
                RadMenu1.LoadContentFile("menu.xml");
            }
            RadMenuItem item = RadMenu1.FindItemByUrl(Request.Url.PathAndQuery);
            if (item != null)
            {
      
                 item.CssClass = "Focused";
             }

    I've pasted in all of the relavent code below ( I think ). 

    radmenu code from masterpage
    <telerik:RadMenu ID="RadMenu1" Runat="server" CssClass="menuNav" 
                                 EnableAjaxSkinRendering="False" 
                             EnableEmbeddedSkins="False" DataSourceID="SiteMapDataSource1" >
                        </telerik:RadMenu>

    sitemap - I can use the menu.xml format if needed.  whatever works.
    <?xml version="1.0" encoding="utf-8" ?>
        <siteMapNode url="" title=""  description="">
            <siteMapNode url="Doctors.aspx" title="Doctors"  description="" />
            <siteMapNode url="Testimonials.aspx" title="Testimonials"  description="" />
          <siteMapNode url="Departments.aspx" title="Departments"  description="" />
          <siteMapNode url="Contact.aspx" title="Contact Us"  description="" />
            
        </siteMapNode>
    </siteMap>

    CSS -  appied to div containing the radmenu

    .menuNav /*radmenu class- not used*/
    {   
          
    }
      
    #navigationDiv a, #navigationDiv a:visited
    {
        height:37px;
        text-decoration:none;
        color:#0069aa;
    }
      
      
    #navigationDiv a:hover, #navigationDiv a:active, #navigationDiv a:focus
    {
        height:37px;
        background-image:url(images/hoverImage.jpg);
        background-position:center;
        background-repeat:no-repeat;
        color:#0069aa;
          
    }
  3. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 12 Aug 2010 Link to this post

    Hi lafon Clark,

    Can you try moving this code to RadMenu's DataBound event handler instead of Page Load?


    Greetings,
    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
  5. lafon Clark
    lafon Clark avatar
    5 posts
    Member since:
    Apr 2010

    Posted 12 Aug 2010 Link to this post

    Hey Peter,
      My masterpage code behind now looks like.
    protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                RadMenu1.LoadContentFile("menu.xml");
            } 
      
        }
      
      
        protected void RadMenu1_DataBound(object sender, EventArgs e)
        {
            RadMenuItem item = RadMenu1.FindItemByUrl(Request.Url.PathAndQuery);
            if (item != null)
            {
      
                item.CssClass = "Focused";
            }
        }

    And my radmenu declaration looks like

    <telerik:RadMenu ID="RadMenu1" Runat="server" CssClass="menuNav" 
                                 EnableAjaxSkinRendering="False" 
                             EnableEmbeddedSkins="False"  
                             ondatabound="RadMenu1_DataBound" >
                        </telerik:RadMenu>

    I'm still missing something.   Where do I define the "focused" cssClass.  I tried it in the site stylesheet. 

    Thanks,
  7. Answer
    Peter
    Admin
    Peter avatar
    6637 posts

    Posted 13 Aug 2010 Link to this post

    Hello lafon Clark,

    The built-in skins for RadMenu have a rmFocused style defined. If you use a custom skin, then make sure you define the Focused class. For example:

    .Focused
    {
        background: yellow !important;
    }

    To be sure that the server-side logic is correct, you can examine the rendered output and check if the Focused class is rendered for the current item.


    Greetings,
    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
  9. lafon Clark
    lafon Clark avatar
    5 posts
    Member since:
    Apr 2010

    Posted 13 Aug 2010 Link to this post

    Thanks,
       The !important took care of it.  I defined the Focused class in my CSS but the rmFocused class was being rendered until I used the 
    !important. 

    Love the products and keep up the great work.

    Lafon
Back to Top