Disabling a toolbarbutton

5 posts, 1 answers
  1. jogi
    jogi avatar
    7 posts
    Member since:
    Sep 2008

    Posted 18 Feb 2009 Link to this post

    Hi All,

    I'd like to disable an item (prevent hover change, cursor/click changes etc.) in the toolbar that contains an image (company logo).  I've tried setting the enabled property to false, but that gives the toolbar a grayed out effect on the image which is not what I want.  Is there an easy way to do this? or am I going to need to start manipulating the dom programmatically?  Thanks in advance.

    -jo
  2. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 19 Feb 2009 Link to this post

    Hi Jo,

    I suggest you set  cssClass and Value properties of the logo button:

     <telerik:RadToolBarButton ImageUrl="Images/logo.gif" CssClass="logo" value="logo"  /> 

    and use the following css styles to prevent the hightlight:

    <style type="text/css">  
        .logo:hover,  
        .logo:hover .rtbOut,  
        .logo:hover .rtbMid,  
        .logo:hover .rtbIn {  
            backgroundnone !important;  
            cursordefault !important;  
        }  
    </style> 

    Also you have to subscribe to OnClientButtonClicking event of RadToolBar to prevent the click:

    <script type="text/javascript">  
        function buttonClicking(sender, args)  
        {  
            if( args.get_item().get_value() == "logo")  
                args.set_cancel(true);  
        }  
    </script> 

    All the best,
    Yana
    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. UI for ASP.NET Ajax is Ready for VS 2017
  4. jogi
    jogi avatar
    7 posts
    Member since:
    Sep 2008

    Posted 19 Feb 2009 Link to this post

    Thanks!
  5. Softec
    Softec avatar
    45 posts
    Member since:
    Sep 2007

    Posted 17 Mar 2009 Link to this post

    Hi

    Is there no way to prevent the opacity of a disabled Item? I'm trying to display some text in the toolbar to know which object will be manipulated. For this i add a disabled Button, set the CssClass Property and move it the end of the Toolbar like this:

    .tbBez
       position: absolute;
    right: 5px;
    }

    This works fine across all browsers but i can't get rid of the opacity. 
    I tried setting my own DisabledCssClass like in the examples, but the opacity can't be overriden/disabled  =/

    I don't want to include some javascript like in the suggestion above... There must be a way to do this by CSS.

    Thanks for help

  6. Softec
    Softec avatar
    45 posts
    Member since:
    Sep 2007

    Posted 17 Mar 2009 Link to this post

    I just got it working!

    I had to override the CSS on the li tag (tbBezLeft / tbBezRight are my DisabledCssClasses)

    .RadToolBar .tbBezLeft,
    .RadToolBar .tbBezRight
    {
    -moz-opacity: 1 !Important;
    opacity: 1 !Important;
    }

    But maybe somebody has a better solution...
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017