| RadControls version |
2.7.2
|
| .NET version |
2.0 with Microsoft AJAX Extensions 1.0
|
| Visual Studio version |
2005
|
| Programming Language |
C#
|
| Browser Support |
All browsers supported by RadControls |
PROJECT DESCRIPTION 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.
- First, make two Skins, one called Enabled and one called Disabled.
- In both skins, make the DropImage.gif into a 1 pixel transparent GIF.
- 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).
- 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:
- Blank out the Styles.css files in both skins.
- 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.)
- Now when the ComboBox needs a new Skin, the CSS will be loaded no matter what!
- 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.
- 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.
- 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.