NoColor option is not visible + Problem with FF3

[Hans van Rijnswoud]

Hi,

I use 10 Color Picker inside a form to customize de design of a page.

The first problem is with FF3. Of the browser crash of he take more than one minute to show the page ( with IE, no problem)
Normally with the default preset we have always the option to select No Color ( localized normally on the top of the pallet)
But here i don't see it.
I try the attribute : ShowEmptyColor="True", but no effect.

any idea ?






Thanks

Yves.

[Svetlina Anati]

Hello Edwin,

The described problems occurs only with particular skins and not with all of them - we are aware of this skins' bug and we will fix it for the Q1 2009 release. For the time being please use another skin and customize it if needed.

All the best,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Hans van Rijnswoud]

Hi Svetlina ,

Right! I change the skin vista for default and now it's perfect.
What about the problem with FF3?
I see in the source of the page a very big definition for all color picker.
eg: i have 10 times this:

Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadColorPicker, {"_currentColorText":"(Current Color is {0})","_items":"[{\"value\":\"#000000\",\"title\":\"#000000\"},{\"value\":\"#000033\",\"title\":\"#000033\"},{\"value\":\"#000066\",\"title\":\"#000066\"},{\"value\":\"#000099\",\"title\":\"#000099\"},{\"value\":\"#0000CC\",\"title\":\"#0000CC\"},{\"value\":\"#0000FF\",\"title\":\"#0000FF\"},{\"value\":\"#003300\",\"title\":\"#003300\"},{\"value\":\"#003333\",\"title\":\"#003333\"},{\"value\":\"#003366\",\"title\":\"#003366\"},{\"value\":\"#003399\",\"title\":\"#003399\"},{\"value\":\"#0033CC\",\"title\":\"#0033CC\"},{\"value\":\"#0033FF\",\"title\":\"#0033FF\"},{\"value\":\"#006600\",\"title\":\"#006600\"},{\"value\":\"#006633\",\"title\":\"#006633\"},{\"value\":\"#006666\",\"title\":\"#006666\"},{\"value\":\"#006699\",\"title\":\"#006699\"},{\"value\":\"#0066CC\",\"title\":\"#0066CC\"},{\"value\":\"#0066FF\",\"title\":\"#0066FF\"},{\"value\":\"#009900\",\"title\":\"#009900\"},{\"value\":\"#009933\",\"title\":\"#009933\"},{\"value\":\"#009966\",\"title\":\"#009966\"},{\"value\":\"#009999\",\"title\":\"#009999\"},{\"value\":\"#0099CC\",\"title\":\"#0099CC\"},{\"value\":\"#0099FF\",\"title\":\"#0099FF\"},{\"value\":\"#00CC00\",\"title\":\"#00CC00\"},{\"value\":\"#00CC33\",\"title\":\"#00CC33\"},{\"value\":\"#00CC66\",\"title\":\"#00CC66\"},{\"value\":\"#00CC99\",\"title\":\"#00CC99\"},{\"value\":\"#00CCCC\",\"title\":\"#00CCCC\"},{\"value\":\"#00CCFF\",\"title\":\"#00CCFF\"},{\"value\":\"#00FF00\",\"title\":\"#00FF00\"},{\"value\":\"#00FF33\",\"title\":\"#00FF33\"},{\"value\":\"#00FF66\",\"title\":\"#00FF66\"},{\"value\":\"#00FF99\",\"title\":\"#00FF99\"},{\"value\":\"#00FFCC\",\"title\":\"#00FFCC\"},{\"value\":\"#00FFFF\",\"title\":\"#00FFFF\"},{\"value\":\"#330000\",\"title\":\"#330000\"},{\"value\":\"#330033\",\"title\":\"#330033\"},{\"value\":\"#330066\",\"title\":\"#330066\"},{\"value\":\"#330099\",\"title\":\"#330099\"},{\"value\":\"#3300CC\",\"title\":\"#3300CC\"},{\"value\":\"#3300FF\",\"title\":\"#3300FF\"},{\"value\":\"#333300\",\"title\":\"#333300\"},{\"value\":\"#333333\",\"title\":\"#333333\"},{\"value\":\"#333366\",\"title\":\"#333366\"},{\"value\":\"#333399\",\"title\":\"#333399\"},{\"value\":\"#3333CC\",\"title\":\"#3333CC\"},{\"value\":\"#3333FF\",\"title\":\"#3333FF\"},{\"value\":\"#336600\",\"title\":\"#336600\"},{\"value\":\"#336633\",\"title\":\"#336633\"},{\"value\":\"#336666\",\"title\":\"#336666\"},{\"value\":\"#336699\",\"title\":\"#336699\"},{\"value\":\"#3366CC\",\"title\":\"#3366CC\"},{\"value\":\"#3366FF\",\"title\":\"#3366FF\"},{\"value\":\"#339900\",\"title\":\"#339900\"},{\"value\":\"#339933\",\"title\":\"#339933\"},{\"value\":\"#339966\",\"title\":\"#339966\"},{\"value\":\"#339999\",\"title\":\"#339999\"},{\"value\":\"#3399CC\",\"title\":\"#3399CC\"},{\"value\":\"#3399FF\",\"title\":\"#3399FF\"},{\"value\":\"#33CC00\",\"title\":\"#33CC00\"},{\"value\":\"#33CC33\",\"title\":\"#33CC33\"},{\"value\":\"#33CC66\",\"title\":\"#33CC66\"},{\"value\":\"#33CC99\",\"title\":\"#33CC99\"},{\"value\":\"#33CCCC\",\"title\":\"#33CCCC\"},{\"value\":\"#33CCFF\",\"title\":\"#33CCFF\"},{\"value\":\"#33FF00\",\"title\":\"#33FF00\"},{\"value\":\"#33FF33\",\"title\":\"#33FF33\"},{\"value\":\"#33FF66\",\"title\":\"#33FF66\"},{\"value\":\"#33FF99\",\"title\":\"#33FF99\"},{\"value\":\"#33FFCC\",\"title\":\"#33FFCC\"},{\"value\":\"#33FFFF\",\"title\":\"#33FFFF\"},{\"value\":\"#660000\",\"title\":\"#660000\"},{\"value\":\"#660033\",\"title\":\"#660033\"},{\"value\":\"#660066\",\"title\":\"#660066\"},{\"value\":\"#660099\",\"title\":\"#660099\"},{\"value\":\"#6600CC\",\"title\":\"#6600CC\"},{\"value\":\"#6600FF\",\"title\":\"#6600FF\"},{\"value\":\"#663300\",\"title\":\"#663300\"},{\"value\":\"#663333\",\"title\":\"#663333\"},{\"value\":\"#663366\",\"title\":\"#663366\"},{\"value\":\"#663399\",\"title\":\"#663399\"},{\"value\":\"#6633CC\",\"title\":\"#6633CC\"},{\"value\":\"#6633FF\",\"title\":\"#6633FF\"},{\"value\":\"#666600\",\"title\":\"#666600\"},{\"value\":\"#666633\",\"title\":\"#666633\"},{\"value\":\"#666666\",\"title\":\"#666666\"},{\"value\":\"#666699\",\"title\":\"#666699\"},{\"value\":\"#6666CC\",\"title\":\"#6666CC\"},{\"value\":\"#6666FF\",\"title\":\"#6666FF\"},{\"value\":\"#669900\",\"title\":\"#669900\"},{\"value\":\"#669933\",\"title\":\"#669933\"},{\"value\":\"#669966\",\"title\":\"#669966\"},{\"value\":\"#669999\",\"title\":\"#669999\"},{\"value\":\"#6699CC\",\"title\":\"#6699CC\"},{\"value\":\"#6699FF\",\"title\":\"#6699FF\"},{\"value\":\"#66CC00\",\"title\":\"#66CC00\"},{\"value\":\"#66CC33\",\"title\":\"#66CC33\"},{\"value\":\"#66CC66\",\"title\":\"#66CC66\"},{\"value\":\"#66CC99\",\"title\":\"#66CC99\"},{\"value\":\"#66CCCC\",\"title\":\"#66CCCC\"},{\"value\":\"#66CCFF\",\"title\":\"#66CCFF\"},{\"value\":\"#66FF00\",\"title\":\"#66FF00\"},{\"value\":\"#66FF33\",\"title\":\"#66FF33\"},{\"value\":\"#66FF66\",\"title\":\"#66FF66\"},{\"value\":\"#66FF99\",\"title\":\"#66FF99\"},{\"value\":\"#66FFCC\",\"title\":\"#66FFCC\"},{\"value\":\"#66FFFF\",\"title\":\"#66FFFF\"},{\"value\":\"#990000\",\"title\":\"#990000\"},{\"value\":\"#990033\",\"title\":\"#990033\"},{\"value\":\"#990066\",\"title\":\"#990066\"},{\"value\":\"#990099\",\"title\":\"#990099\"},{\"value\":\"#9900CC\",\"title\":\"#9900CC\"},{\"value\":\"#9900FF\",\"title\":\"#9900FF\"},{\"value\":\"#993300\",\"title\":\"#993300\"},{\"value\":\"#993333\",\"title\":\"#993333\"},{\"value\":\"#993366\",\"title\":\"#993366\"},{\"value\":\"#993399\",\"title\":\"#993399\"},{\"value\":\"#9933CC\",\"title\":\"#9933CC\"},{\"value\":\"#9933FF\",\"title\":\"#9933FF\"},{\"value\":\"#996600\",\"title\":\"#996600\"},{\"value\":\"#996633\",\"title\":\"#996633\"},{\"value\":\"#996666\",\"title\":\"#996666\"},{\"value\":\"#996699\",\"title\":\"#996699\"},{\"value\":\"#9966CC\",\"title\":\"#9966CC\"},{\"value\":\"#9966FF\",\"title\":\"#9966FF\"},{\"value\":\"#999900\",\"title\":\"#999900\"},{\"value\":\"#999933\",\"title\":\"#999933\"},{\"value\":\"#999966\",\"title\":\"#999966\"},{\"value\":\"#999999\",\"title\":\"#999999\"},{\"value\":\"#9999CC\",\"title\":\"#9999CC\"},{\"value\":\"#9999FF\",\"title\":\"#9999FF\"},{\"value\":\"#99CC00\",\"title\":\"#99CC00\"},{\"value\":\"#99CC33\",\"title\":\"#99CC33\"},{\"value\":\"#99CC66\",\"title\":\"#99CC66\"},{\"value\":\"#99CC99\",\"title\":\"#99CC99\"},{\"value\":\"#99CCCC\",\"title\":\"#99CCCC\"},{\"value\":\"#99CCFF\",\"title\":\"#99CCFF\"},{\"value\":\"#99FF00\",\"title\":\"#99FF00\"},{\"value\":\"#99FF33\",\"title\":\"#99FF33\"},{\"value\":\"#99FF66\",\"title\":\"#99FF66\"},{\"value\":\"#99FF99\",\"title\":\"#99FF99\"},{\"value\":\"#99FFCC\",\"title\":\"#99FFCC\"},{\"value\":\"#99FFFF\",\"title\":\"#99FFFF\"},{\"value\":\"#CC0000\",\"title\":\"#CC0000\"},{\"value\":\"#CC0033\",\"title\":\"#CC0033\"},{\"value\":\"#CC0066\",\"title\":\"#CC0066\"},{\"value\":\"#CC0099\",\"title\":\"#CC0099\"},{\"value\":\"#CC00CC\",\"title\":\"#CC00CC\"},{\"value\":\"#CC00FF\",\"title\":\"#CC00FF\"},{\"value\":\"#CC3300\",\"title\":\"#CC3300\"},{\"value\":\"#CC3333\",\"title\":\"#CC3333\"},{\"value\":\"#CC3366\",\"title\":\"#CC3366\"},{\"value\":\"#CC3399\",\"title\":\"#CC3399\"},{\"value\":\"#CC33CC\",\"title\":\"#CC33CC\"},{\"value\":\"#CC33FF\",\"title\":\"#CC33FF\"},{\"value\":\"#CC6600\",\"title\":\"#CC6600\"},{\"value\":\"#CC6633\",\"title\":\"#CC6633\"},{\"value\":\"#CC6666\",\"title\":\"#CC6666\"},{\"value\":\"#CC6699\",\"title\":\"#CC6699\"},{\"value\":\"#CC66CC\",\"title\":\"#CC66CC\"},{\"value\":\"#CC66FF\",\"title\":\"#CC66FF\"},{\"value\":\"#CC9900\",\"title\":\"#CC9900\"},{\"value\":\"#CC9933\",\"title\":\"#CC9933\"},{\"value\":\"#CC9966\",\"title\":\"#CC9966\"},{\"value\":\"#CC9999\",\"title\":\"#CC9999\"},{\"value\":\"#CC99CC\",\"title\":\"#CC99CC\"},{\"value\":\"#CC99FF\",\"title\":\"#CC99FF\"},{\"value\":\"#CCCC00\",\"title\":\"#CCCC00\"},{\"value\":\"#CCCC33\",\"title\":\"#CCCC33\"},{\"value\":\"#CCCC66\",\"title\":\"#CCCC66\"},{\"value\":\"#CCCC99\",\"title\":\"#CCCC99\"},{\"value\":\"#CCCCCC\",\"title\":\"#CCCCCC\"},{\"value\":\"#CCCCFF\",\"title\":\"#CCCCFF\"},{\"value\":\"#CCFF00\",\"title\":\"#CCFF00\"},{\"value\":\"#CCFF33\",\"title\":\"#CCFF33\"},{\"value\":\"#CCFF66\",\"title\":\"#CCFF66\"},{\"value\":\"#CCFF99\",\"title\":\"#CCFF99\"},{\"value\":\"#CCFFCC\",\"title\":\"#CCFFCC\"},{\"value\":\"#CCFFFF\",\"title\":\"#CCFFFF\"},{\"value\":\"#FF0000\",\"title\":\"#FF0000\"},{\"value\":\"#FF0033\",\"title\":\"#FF0033\"},{\"value\":\"#FF0066\",\"title\":\"#FF0066\"},{\"value\":\"#FF0099\",\"title\":\"#FF0099\"},{\"value\":\"#FF00CC\",\"title\":\"#FF00CC\"},{\"value\":\"#FF00FF\",\"title\":\"#FF00FF\"},{\"value\":\"#FF3300\",\"title\":\"#FF3300\"},{\"value\":\"#FF3333\",\"title\":\"#FF3333\"},{\"value\":\"#FF3366\",\"title\":\"#FF3366\"},{\"value\":\"#FF3399\",\"title\":\"#FF3399\"},{\"value\":\"#FF33CC\",\"title\":\"#FF33CC\"},{\"value\":\"#FF33FF\",\"title\":\"#FF33FF\"},{\"value\":\"#FF6600\",\"title\":\"#FF6600\"},{\"value\":\"#FF6633\",\"title\":\"#FF6633\"},{\"value\":\"#FF6666\",\"title\":\"#FF6666\"},{\"value\":\"#FF6699\",\"title\":\"#FF6699\"},{\"value\":\"#FF66CC\",\"title\":\"#FF66CC\"},{\"value\":\"#FF66FF\",\"title\":\"#FF66FF\"},{\"value\":\"#FF9900\",\"title\":\"#FF9900\"},{\"value\":\"#FF9933\",\"title\":\"#FF9933\"},{\"value\":\"#FF9966\",\"title\":\"#FF9966\"},{\"value\":\"#FF9999\",\"title\":\"#FF9999\"},{\"value\":\"#FF99CC\",\"title\":\"#FF99CC\"},{\"value\":\"#FF99FF\",\"title\":\"#FF99FF\"},{\"value\":\"#FFCC00\",\"title\":\"#FFCC00\"},{\"value\":\"#FFCC33\",\"title\":\"#FFCC33\"},{\"value\":\"#FFCC66\",\"title\":\"#FFCC66\"},{\"value\":\"#FFCC99\",\"title\":\"#FFCC99\"},{\"value\":\"#FFCCCC\",\"title\":\"#FFCCCC\"},{\"value\":\"#FFCCFF\",\"title\":\"#FFCCFF\"},{\"value\":\"#FFFF00\",\"title\":\"#FFFF00\"},{\"value\":\"#FFFF33\",\"title\":\"#FFFF33\"},{\"value\":\"#FFFF66\",\"title\":\"#FFFF66\"},{\"value\":\"#FFFF99\",\"title\":\"#FFFF99\"},{\"value\":\"#FFFFCC\",\"title\":\"#FFFFCC\"},{\"value\":\"#FFFFFF\",\"title\":\"#FFFFFF\"},{\"value\":\"#000000\",\"title\":\"#000000\"},{\"value\":\"#111111\",\"title\":\"#111111\"},{\"value\":\"#222222\",\"title\":\"#222222\"},{\"value\":\"#333333\",\"title\":\"#333333\"},{\"value\":\"#444444\",\"title\":\"#444444\"},{\"value\":\"#555555\",\"title\":\"#555555\"},{\"value\":\"#666666\",\"title\":\"#666666\"},{\"value\":\"#777777\",\"title\":\"#777777\"},{\"value\":\"#888888\",\"title\":\"#888888\"},{\"value\":\"#999999\",\"title\":\"#999999\"},{\"value\":\"#AAAAAA\",\"title\":\"#AAAAAA\"},{\"value\":\"#BBBBBB\",\"title\":\"#BBBBBB\"},{\"value\":\"#CCCCCC\",\"title\":\"#CCCCCC\"},{\"value\":\"#DDDDDD\",\"title\":\"#DDDDDD\"},{\"value\":\"#EEEEEE\",\"title\":\"#EEEEEE\"},{\"value\":\"#FFFFFF\",\"title\":\"#FFFFFF\"}]","_noColorText":"No Color","_pickColorText":"Pick Color","_realWidthColorBoxOpera":0,"_realWidthIE6":362,"_realWidthIE7":326,"_selectedColor":"#000000","_selectedColorName":"#000000","_showIcon":true,"_uniqueID":"ctl00$ContentPlaceHolder$RadPanelBar1$i0$i0$radColor_TableBorder","_width":0,"clientStateFieldID":"ctl00_ContentPlaceHolder_RadPanelBar1_i0_i0_radColor_TableBorder_ClientState"}, {"colorChange":ColorChangeTableBorder}, null, $get("ctl00_ContentPlaceHolder_RadPanelBar1_i0_i0_radColor_TableBorder"));
});

Is it not possible to use one definition for all Collapsed Color picker ?
I read a topic about this problem in this forum but it was a message of 2007.
Normally it was planned for 2008.
Any progress for this problem ?

Thanks.

Edwin.

[Tsvetie]

Hello Edwin,
I am not quite sure which topic you refer to, but I suppose that it was about implementing client-side rendering of the palette of a RadColorPicker on demand, instead of server-side rendering. This feature is already implemented and the palette of a color picker is not initialized until you click the button to show it.

What you refer to, is an array of the colors of the palette. As the palette is created in the client, we have to pass to the client object of the color picker an array of colors to include in its palette.

We are currently considering a new feature for the RadColorPicker - something like one shared palette across all RadColorPickers with the same colors (in case ShowIcon=True). However, I cannot give you an estimate when this feature will be available in case we decide to implement it.

For the time being, you can implement this yourself, using few private fields of the RadColorPicker client object:

<telerik:RadColorPicker ID="RadColorPicker1" runat="server" ShowIcon="true"></telerik:RadColorPicker>

<telerik:RadColorPicker ID="RadColorPicker2" runat="server" ShowIcon="true"

Preset="none" OnClientLoaded="OnClientLoaded"></telerik:RadColorPicker>

<telerik:RadColorPicker ID="RadColorPicker3" runat="server" ShowIcon="true"

Preset="none" OnClientLoaded="OnClientLoaded"></telerik:RadColorPicker>

<telerik:RadColorPicker ID="RadColorPicker4" runat="server" ShowIcon="true"

Preset="none" OnClientLoaded="OnClientLoaded"></telerik:RadColorPicker>

<telerik:RadColorPicker ID="RadColorPicker5" runat="server" ShowIcon="true"

Preset="none" OnClientLoaded="OnClientLoaded"></telerik:RadColorPicker>

<telerik:RadColorPicker ID="RadColorPicker6" runat="server" ShowIcon="true"

Preset="none" OnClientLoaded="OnClientLoaded"></telerik:RadColorPicker>

<telerik:RadColorPicker ID="RadColorPicker7" runat="server" ShowIcon="true"

Preset="none" OnClientLoaded="OnClientLoaded"></telerik:RadColorPicker>

<telerik:RadColorPicker ID="RadColorPicker8" runat="server" ShowIcon="true"

Preset="none" OnClientLoaded="OnClientLoaded"></telerik:RadColorPicker>

<telerik:RadColorPicker ID="RadColorPicker9" runat="server" ShowIcon="true"

Preset="none" OnClientLoaded="OnClientLoaded"></telerik:RadColorPicker>

<telerik:RadColorPicker ID="RadColorPicker10" runat="server" ShowIcon="true"

Preset="none" OnClientLoaded="OnClientLoaded"></telerik:RadColorPicker>

<script type="text/javascript">

function OnClientLoaded(sender, args)

{

var sourceColorPicker = $find('<%= RadColorPicker1.ClientID %>');

var sharedColors = sourceColorPicker._items;

sender._items = sharedColors;

// The number of columns is different for different      // predefined presets

sender._columns = sourceColorPicker._columns;

}

</script>

Now, regarding the problem in FF3 -  I tried to reproduce it locally, but to no avail. I tested a page with 10 RadColorPickers with the following definition:

<telerik:RadColorPicker ID="RadColorPicker1" runat="server" ShowIcon="true">
</telerik:RadColorPicker>

As the page did not crash, I tested with 20 RadColorPickers, but with the same result - the page displayed as expected.

That is why I suppose there is something additional on your page that may be causing the page to crash in FF3. In case you could send me a test page with which I can reproduce the problem locally, I will do my best to find the cause for the problem and help you fix it.

Best wishes,
Tsvetie
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.