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

Menu not focussed/highlight with different color

3 Answers 68 Views
Menu
This is a migrated thread and some comments may be shown as answers.
sudhakar
Top achievements
Rank 1
sudhakar asked on 23 Nov 2010, 04:43 AM

Hello All,

 

Need an urgent help.

I am using the Radmenuitem in a User Contol and in Master Page.

 

I am trying to highlight the menu selected with different color else the user is lost in which menu is looking into.

I have to work on the Client side code, becuase when i click on the Menus the Page Load doesn't get called the Menu.ascx file.

Please help me with Setting teh CSS class on Client side when the Menu item is clicked.

I tried using OnClientItemClicked() but seems no difference.

Please find the code below.

<radM:RadMenu ID="mnuImport" Width="90%" runat="server" Skin="Black" OnClientItemClicked="ClientCSS();" CssClass="menu">       
        <Items>      
            <radM:RadMenuItem Text="Home" NavigateUrl="../home.aspx"></radM:RadMenuItem>      
            <radM:RadMenuItem Text="File" NavigateUrl="../home.aspx"></radM:RadMenuItem>      
            <radM:RadMenuItem Text="Edit" NavigateUrl="../home.aspx"></radM:RadMenuItem>      
            <radM:RadMenuItem Text="View" NavigateUrl="../home.aspx"></radM:RadMenuItem>      
        </Items>      
</radM:RadMenu>   
    
    
function ClientCSS(sender, eventArgs)  
    
        var menu = $find("<%= rmstabmenu.ClientID %>"); 
        var item = menu.findItemByText(home); 
        if (item != null)  
        
            item.CssClass = "Focussed"; 
        
    
    
<style
.Focused   
    {   
            
      color: Red !important;   
      background-color: Yellow !important;   
    }   
</style>

3 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 23 Nov 2010, 07:37 AM
Hello Sudhakar,


First of all when attaching the event handler, we don't need to include brackets which means in order to attach a handler you should not call the function, but you should only provide the function's name.

I assume that you are using RadMenu classic version (not RadControls for Ajax) and referring the Ajax version's documentation.
You can find the documentation for classic version here:
RadMenu for ASP.NET
Telerik RadMenu Client-Side API


Hope this helps.


Regards,
Shinu.
0
sudhakar
Top achievements
Rank 1
answered on 24 Nov 2010, 11:35 AM
Hi Shinu,

I tried other way around instead of using event handlers as suggested.

The problem facing now is, when the Menu are hovered and selected it changes its color, but as soon as I click in the page or item below that menu it come to a default selection with same color as all other menu items. Difficult for the user on which menu is looking into.

Please suggest the solution for same. I need  to change on the client side code only.

<head runat="server">
<title></title>
    <style type="text/css">
    .MainMenu  
    {  
      color: white !important;  
      background-color: #A8C2B9 !important;  
    }  
       
  
    .customFocused
    {
        color: Red !important;  
        background-color: Yellow !important
    }
  
</style>
</head>
  
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
          
   <table style="width:100%">
                   
              <tr style="width:100%">
               <td style="width:100%">  
                <telerik:RadMenu ID="rmstabmenu" runat="server" Skin="Black" EnableRoundedCorners="false" EnableShadows="true"  
                CollapseDelay="100" CollapseAnimation-Duration="100" ExpandAnimation-Duration="100" CssClass="MainMenu">
                   <Items>
                        <telerik:RadMenuItem runat="server" Text="This" FocusedCssClass="customFocused"></telerik:RadMenuItem>
                       <telerik:RadMenuItem runat="server" Text="Yahoo" NavigateUrl="http://www.yahoo.com"   Target="_blank" FocusedCssClass="customFocused"> </telerik:RadMenuItem
                       <telerik:RadMenuItem runat="server" Text="Google" NavigateUrl="http://www.google.com"  Target="_blank"> </telerik:RadMenuItem>
                       </Items>
                       </telerik:RadMenu>
                       </td>
                       </tr>
                       </table>
        
    </div>
    </form>
</body>

Regards
Sudhakar
0
sudhakar
Top achievements
Rank 1
answered on 06 Dec 2010, 03:20 AM
Hello Shinu,

Anu updates on the above post.

Regards
Sudhakar
Tags
Menu
Asked by
sudhakar
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
sudhakar
Top achievements
Rank 1
Share this question
or