Item selected with menu in master page

[lafon Clark]

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" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <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;

}

[Peter]

Hi lafon Clark,

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


Greetings,
Peter
the Telerik team

[lafon Clark]

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,

[Peter]

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

[lafon Clark]

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