Currently it is not possible to set an alpha value for a color in the RadColorPicker. It could be useful to add such a feature in the control.
The color picker doesn't looks good when zooming in the browser. Try zooming to 120% and run your demo: http://demos.telerik.com/aspnet-ajax/colorpicker/examples/overview/defaultcs.aspx You need to reload the page after zooming! The Web colors wraps, and the HSB/HSV tabs also wraps a lot! Also see this thread: http://www.telerik.com/forums/looks-really-bad-when-zooming
There are missing keys in the resx files and the resource files are not applied correctly. More info here:
When a RadColorPicker that only has the HSB or HSV palette is made visible or added during an AJAX request, it throws the following error:
Sys.ArgumentOutOfRangeException: Height should be an integer bigger than 1
This is caused by the lack of dimensions while the component is initializing on the client side and, for example, RGBSliders, manages to initialize correctly. The control must either have default dimensions for all modes, or to perform check for undefined dimensions provided by the browser, or both.
A workaround is to add the RGBSliders mode as the first mode so the control can initialize, and use a small JS handler that will switch to the HSB/HSV mode and hide the RGB mode.
Here follows an example that includes the workaround:
<asp:UpdatePanel ID=
"mainUpdatePanel"
runat=
"server"
>
<ContentTemplate>
<telerik:RadButton ID=
"RadButton1"
runat=
"server"
Text=
"RadButton"
></telerik:RadButton>
<asp:Panel runat=
"server"
ID=
"wrappingPanel"
>
<%--WORKAROUND PART 1 - add the RGBSLiders tab first--%>
<telerik:RadColorPicker ID=
"RadColorPickerStart"
runat=
"server"
PaletteModes=
"RGBSliders, HSB"
></telerik:RadColorPicker>
<%--WORKAROUND PART 2
The script is wrapped
in
a RadScriptBlock so it gets
registered and executed after the partial postback. By
default
, it will not be parsed--%>
<telerik:RadScriptBlock runat=
"server"
ID=
"rsb1"
>
<script>
Sys.Application.add_load(
function
() {
//a panel is used here to make looking for the color pickers added in it easier
//you can replace getting the reference to the color picker with any preferred method
$telerik.$(
"[id$='wrappingPanel']"
).find(
".RadColorPicker"
).each(
function
(index, elem) {
if
(elem && elem.control) {
var
picker = elem.control;
setTimeout(
function
() {
//trigger the internal logic of the control that will switch the tabs
//in this case - the HSB tab is "clicked"
picker._tabClicked({ target: $telerik.$(picker._tabStrip).find(
"a[title='HSB']"
)[0] });
//hide the RGB tab
$telerik.$(picker._tabStrip).find(
"a[title='RGB']"
).hide();
}, 0);
//the timeout is needed so the control can initialize before we manipulate it
}
})
});
</script>
</telerik:RadScriptBlock>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
Protected
Sub
RadButton1_Click(sender
As
Object
, e
As
EventArgs)
Handles
RadButton1.Click
wrappingPanel.Visible =
True
End
Sub
RadColorPicker remains clickable when its set_enabled(false) method is called. Steps to reproduce: 1. Run this code: <telerik:RadColorPicker ID="RadColorPicker1" runat="server" ShowIcon="true" ShowEmptyColor="false" RenderMode="Lightweight" /> <br /><br /><br /> <select id="mySelect" onchange="EnableDisableColorPicker()"> <option value="1">1</option> <option value="2" selected="selected">2</option> </select> <script> function EnableDisableColorPicker() { var x = document.getElementById("mySelect").value; var colorPicker = $find("<%= RadColorPicker1.ClientID %>"); if (x == 1) { colorPicker.set_enabled(false); } else { colorPicker.set_enabled(true); } } </script> 2. Select option 1. Result: RadColorPicker gets disabled, but remains clickable