This is a migrated thread and some comments may be shown as answers.

Item selected with menu in master page

4 Answers 194 Views
Menu
This is a migrated thread and some comments may be shown as answers.
lafon Clark
Top achievements
Rank 1
lafon Clark asked on 12 Aug 2010, 02:02 AM
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;
      
}

4 Answers, 1 is accepted

Sort by
0
Peter
Telerik team
answered on 12 Aug 2010, 03:45 PM
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
0
lafon Clark
Top achievements
Rank 1
answered on 12 Aug 2010, 07:56 PM
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,
0
Accepted
Peter
Telerik team
answered on 13 Aug 2010, 09:42 AM
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
1
lafon Clark
Top achievements
Rank 1
answered on 14 Aug 2010, 12:30 AM
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
Tags
Menu
Asked by
lafon Clark
Top achievements
Rank 1
Answers by
Peter
Telerik team
lafon Clark
Top achievements
Rank 1
Share this question
or