How to fully support disabling/enabling a RadComboBox (in an UpdatePanel and beyond)

3 posts, 0 answers
  1. Jeremy T. Fuller
    Jeremy T. Fuller avatar
    51 posts
    Member since:
    Aug 2012

    Posted 27 Jul 2007 Link to this post


    RadControls version

    .NET version

    2.0 with Microsoft AJAX Extensions 1.0
    Visual Studio version

    Programming Language

    Browser Support

    All browsers supported by RadControls

    Ever needed to disable a RadComboBox? Out of the box, the RadComboBox can be disabled – but there's no support for changing the visual style of the control when it's disabled! This project illustrates a method for doing the following:
    • Making a RadComboBox look just like a Windows Vista drop down list
    • Implementing full enable/disable control over a RadComboBox (visually as well as functionally)
    • Implementing hover effects on the drop image
    • Doing all of this inside a Microsoft AJAX Extensions UpdatePanel control
    Here's how this is all accomplished. Note that Microsoft AJAX Extensions 1.0 must be installed for this project to function.
    1. First, make two Skins, one called Enabled and one called Disabled.
    2. In both skins, make the DropImage.gif into a 1 pixel transparent GIF.
    3. Next, use CSS to specify the width, height, and background image of the drop image. This allows us to change the image using the Skin, and to add a hover effect to the image. This also allows us to store the images wherever we want (in this project, they are in the /Images/ folder).
    4. To disable the ComboBox, we are going to switch skins. But we're going to do this in an UpdatePanel. The problem here is the browser can't reload any new CSS from inside an UpdatePanel, so although we can switch Skins dynamically, there won't be any CSS! The solution is:
      1. Blank out the Styles.css files in both skins.
      2. Copy the styles that were there into a separate CSS file and include that file globally. Now we have both skins here together in one file. (Note that you could have just told the browser to load the two separate Skin CSS files directly, but I didn't do it that way because I prefer to have more control over where my CSS files are physically served from.)
      3. Now when the ComboBox needs a new Skin, the CSS will be loaded no matter what!
    5. Now that we've got the visuals working, we need to figure out a great way to actually perform the disable. What we'd like to be able to do is allow the developer to simply say Enabled = false to disable the ComboBox.
    6. One approach is to handle the MasterPage's PreRender event. During this event, we recursively search through the page for RadComboBox controls. When one is encountered, we simply switch the skin depending on the value of the Enabled property. We use the PreRender event because it will fire after all of your Page's events have fired, including the control events.
    7. The net effect, once all this is done, is true disable support, both visually and functionally. All the programmer needs to do is set Enabled = false and the control will respond accordingly. And all of this will work across regular postbacks and from within an AJAX postback in an UpdatePanel.
  2. Arie Segev
    Arie Segev avatar
    39 posts
    Member since:
    Dec 2006

    Posted 01 Aug 2007 Link to this post

    Thanks; quite useful.
    One issue I have noticed is that when diabled the item that was last selected before diabling still shows. Probably in most situations there is some context to the disabling and the right way to do it is to add a new selected  list item saying something about the context, e.g., "selections are currently unavailble"; then change the skin and disable. when enabling remove that message item. Should be easy to do.

    -- Arie
  3. Jeremy T. Fuller
    Jeremy T. Fuller avatar
    51 posts
    Member since:
    Aug 2012

    Posted 01 Aug 2007 Link to this post


    The goal with this implementation is to duplicate the behavior of a normal drop down list. Disabling a normal drop down list does not change the selection in any way. It is up to the individual developer to change this behavior as needed for his/her specific situation. You could remove all items, switch to the first item, or add a new item as you mentioned above.

    Hope it helps!

Back to Top