Text color for disabled menu item

8 posts, 0 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 10 Jul 2009 Link to this post

    Hi,

    I'm using the menu component to provide good looking headers for a custom treeview.  Because it is a header with no interactivity I have disabled the menu items.  The problem is that the text is now grey and I want it to be white. 

    What is the CSS that I need to alter to override the defaults? 

    Regards,

    Jon

    PS.  If anyone has any suggestions for better ways to have a decent styled header on the treeview rather than using the menu I'd appreciate them.  I've already tried a grid but didn't like the results in this case.
  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 10 Jul 2009 Link to this post

    Hi Jon,

    Please mind that IE and Firefox treat differently a disabled item. IE automatically grays the text of the disabled item, but FF does not.

    Best wishes,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 10 Jul 2009 Link to this post

    Hi Paul,

    Ah.  I hadn't realised that the control was using the browser disabled function - I'd been working on the basis that it was a css class.

    I'll have a look at leaving the menu items live and disable any click activity.  Could I override the styles on the control for hover?  Then I could change the hover style to the same as the normal state...This would need to be control specific as I have a proper functional menu on the same page.

    Regards,

    Jon
  4. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 10 Jul 2009 Link to this post

    Hi Jon,

    Here's a sample code snippet that shows the needed approach.

    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
        <title></title
        <style type="text/css"
            .alabala 
            { 
                color: Black !important; 
            } 
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server"
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
        </telerik:RadScriptManager> 
     
        <script type="text/javascript"
            function pageLoad() { 
                var menu = $find('<%= RadMenu1.ClientID %>'); 
                var item = menu.findItemByText("Root RadMenuItem2"); 
                if (item.get_enabled() == false) { 
                    item.get_linkElement().className = "rmLink rmDisabled alabala"
                } 
            } 
             
        </script> 
     
        <telerik:RadMenu ID="RadMenu1" runat="server"
            <Items> 
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1"
                    <Items> 
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1"
                        </telerik:RadMenuItem> 
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2"
                        </telerik:RadMenuItem> 
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3"
                        </telerik:RadMenuItem> 
                    </Items> 
                </telerik:RadMenuItem> 
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2" Enabled="false"
                    <Items> 
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1"
                        </telerik:RadMenuItem> 
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2"
                        </telerik:RadMenuItem> 
                    </Items> 
                </telerik:RadMenuItem> 
            </Items> 
        </telerik:RadMenu> 
        </form> 
    </body> 
    </html> 


    Greetings,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 11 Jul 2009 Link to this post

    Thanks Paul,

    That did the trick.

    On the first and last menu items I have images but when enabled I'd like them to NOT show the standard hover functionality.  How would I go about doing that?  I assume that it would be something similar?

    Regards,

    Jon
  6. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 13 Jul 2009 Link to this post

    Hi Paul,

    I've just had more of a hunt for information on the current issue that I have where I want to disable the class for the click/hover on the menu item.  I found some information about the CSS for the menus but nothing specific to my needs.

    The previous code (I've included my version below) works for changing the text colour of the menu elements when they are disabled.  The problem that I have is that I have a Add New image and a Refresh image both of which need to have a link on them but I don't want the hover highlight or the selected/clicked highlight to appear on them (owing to their width some of the selection style appears beneath the menu row!).  What would I need to do to override the hover/selected classes?

    Regards,

    Jon
                <script type="text/javascript">  
                    function pageLoad() {  
                        var menu = $find('<%= uxRadMenu.ClientID %>');  
                        var items = menu.get_items();  
                        for (var i = 0; i < items.get_count(); i++) {  
                            items.getItem(i).get_linkElement().className = "rmLink rmDisabled blackText";  
                        }  
                    }    
                </script> 

  7. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 13 Jul 2009 Link to this post

    Hi Jon,

    Obviously, you have quite a few requirements keep coming. Therefore, I think it will be best if you open a formal support ticket and attach a simple running project (incl. your custom skin, CSS, images, DB backup if needed and so on) demonstrating the problem (and step-by-step instructions on doing so). In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

    Thanks beforehand for your patience and cooperation,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  8. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 13 Jul 2009 Link to this post

    Hi Paul,

    I'm just simplifying the page to it's basic elements and will submit.

    Regards,

    Jon
Back to Top