Telerik
Home / Community / Forums / RadControls for ASP.NET: Toolbar / Toggle button does not greyout when disabled on the client-side

Not answered Toggle button does not greyout when disabled on the client-side

Feed from this thread
  • Posted on Feb 24, 2008 (permalink)

    If you have a toggle button with an image and enable and then disable the button and then enable it again, the image will show correctly for the enabled state and disabled state. This will work as long as you don't move the cursor over the image when the button is enabled. If you move the cursor over the button while it is enabled to highlight it, then disable the button, the image will not look disabled. It appears that the correct css styles are not being applied during disable. This problem is only noticeable on IE 7.

    Reply

  • Telerik Admin admin's avatar

    Posted on Feb 26, 2008 (permalink)

    Hello Polaris431,

    Thank you for contacting Telerik support.

    This problem is due to the browser behaviour, rather than to the RadToolbar. When a Toolbar Button is disabled no other actions can be performed on this button. Therefore the disabled css class can not be applied and the button remains in its last condition (in your case - visually hovered).

    You could try applying the css properties for a disabled Toolbar Button right before disabling it like this:
                 function disableToolbarButton(toolbarButton) 
            { 
                var toolbarButtonDiv = document.getElementById(toolbarButton.ClientID); 
                 
                toolbarButtonDiv.style.filter = "alpha(opacity='40')"
                toolbarButtonDiv.style.opacity = "0.4"
                toolbarButtonDiv.style.background = "none"
                 
                var image = document.getElementById("img_" + sender.ClientID); 
                 
                image.style.background = "none"
                 
                sender.Enabled = false
            } 

    When you wish to enable the Toolbar Button you should apply its normal css style again like this:
                 function enableButton(toolbarButton
            { 
                toolBarButton.Enabled = true
                 
                var toolbarButtonDiv = document.getElementById(toolbarButton.ClientID); 
                 
                toolbarButtonDiv.style.filter = ""
                toolbarButtonDiv.style.opacity = ""
                toolbarButtonDiv.style.background = 'transparent url("Img/toolbarBgHover.gif") no-repeat top right'
                 
                var image = document.getElementById("img_" + toolBarButton.ClientID); 
                 
                image.style.background = 'transparent url("Img/toolbarButtonOver.gif") no-repeat top left'
            } 

    I hope this helps.

    All the best,
    Simon
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center

    Reply

Powered by Sitefinity ASP.NET CMS

Contact Us | Site Feedback | Terms of Use | Privacy Policy
Copyright © 2002-2009 Telerik. All rights reserved.