After debugging the design code in the debug mode, I found that the ColorPickerBehavior has stored the color validation Regex in a "static" object in its initialize function.
initialize: function() {
AjaxControlToolkit.ColorPickerBehavior.callBaseMethod(this, 'initialize');
// Store the color validation Regex in a "static" object off of
// AjaxControlToolkit.ColorPickerBehavior. If this _colorRegex object hasn't been
// created yet, initialize it for the first time.
if (!AjaxControlToolkit.ColorPickerBehavior._colorRegex) {
AjaxControlToolkit.ColorPickerBehavior._colorRegex = new RegExp('^[A-Fa-f0-9]{6}$');
}
var elt = this.get_element();
$addHandlers(elt, this._element$delegates);
if (this._button) {
$addHandlers(this._button, this._button$delegates);
}
var value = this.get_selectedColor();
if (value) {
this.set_selectedColor(value);
}
this._restoreSample();
},
This Regex is to validate the SelectedColor property when it is assigned.
set_selectedColor: function(value) {
if (this._selectedColor !== value && this._validate(value)) {
this._selectedColor = value;
this._selectedColorChanging = true;
if (value !== this._textbox.get_Value()) {
this._textbox.set_Value(value);
}
this._showSample(value);
this._selectedColorChanging = false;
this.raisePropertyChanged("selectedColor");
}
},
But when the SelectedColor property is set in the ColorPickerBehavior’s create process, the initialize function has not been fired. Thus, the exception “AjaxControlToolkit.ColorPickerBehavior._colorRegex is undefined.” would be raised.
We need to add the same code about defining the Regex when the page is in the init stage.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestSelectedColor.aspx.cs"
Inherits="SoluTest_ColorPicker.TestSelectedColor" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug" />
<asp:Label ID="Label1" Text="Color" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:TextBox ID="TextBox1" runat="server" />
<cc1:ColorPickerExtender ID="ColorPickerExtender1" runat="server" Enabled="True"
PopupButtonID="Button1" SelectedColor="33ffcc" TargetControlID="TextBox1" SampleControlID="Label1"
OnClientColorSelectionChanged="colorChanged">
</cc1:ColorPickerExtender>
</div>
<script type="text/javascript">
//This code must be placed below the ScriptManager, otherwise the "Sys" cannot be used because it is undefined.
Sys.Application.add_init(function() {
// Store the color validation Regex in a "static" object off of
// AjaxControlToolkit.ColorPickerBehavior. If this _colorRegex object hasn't been
// created yet, initialize it for the first time.
if (!AjaxControlToolkit.ColorPickerBehavior._colorRegex) {
AjaxControlToolkit.ColorPickerBehavior._colorRegex = new RegExp('^[A-Fa-f0-9]{6}$');
}
});
function colorChanged(sender) {
sender.get_element().style.color =
"#" + sender.get_selectedColor();
}
</script>
</form>
</body>
</html>
Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as
Answer” if a marked post does not actually answer your question.
Zhi-Qiang Ni...
All-Star
33491 Points
2952 Posts
Microsoft
Re: ColorPickerExtender fails when using SelectedColor
Oct 06, 2009 08:49 AM|LINK
Hi Boddam,
After debugging the design code in the debug mode, I found that the ColorPickerBehavior has stored the color validation Regex in a "static" object in its initialize function.
initialize: function() { AjaxControlToolkit.ColorPickerBehavior.callBaseMethod(this, 'initialize'); // Store the color validation Regex in a "static" object off of // AjaxControlToolkit.ColorPickerBehavior. If this _colorRegex object hasn't been // created yet, initialize it for the first time. if (!AjaxControlToolkit.ColorPickerBehavior._colorRegex) { AjaxControlToolkit.ColorPickerBehavior._colorRegex = new RegExp('^[A-Fa-f0-9]{6}$'); } var elt = this.get_element(); $addHandlers(elt, this._element$delegates); if (this._button) { $addHandlers(this._button, this._button$delegates); } var value = this.get_selectedColor(); if (value) { this.set_selectedColor(value); } this._restoreSample(); },This Regex is to validate the SelectedColor property when it is assigned.
set_selectedColor: function(value) { if (this._selectedColor !== value && this._validate(value)) { this._selectedColor = value; this._selectedColorChanging = true; if (value !== this._textbox.get_Value()) { this._textbox.set_Value(value); } this._showSample(value); this._selectedColorChanging = false; this.raisePropertyChanged("selectedColor"); } },But when the SelectedColor property is set in the ColorPickerBehavior’s create process, the initialize function has not been fired. Thus, the exception “AjaxControlToolkit.ColorPickerBehavior._colorRegex is undefined.” would be raised.
We need to add the same code about defining the Regex when the page is in the init stage.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestSelectedColor.aspx.cs" Inherits="SoluTest_ColorPicker.TestSelectedColor" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug" /> <asp:Label ID="Label1" Text="Color" runat="server" /> <asp:Button ID="Button1" runat="server" Text="Button" /> <asp:TextBox ID="TextBox1" runat="server" /> <cc1:ColorPickerExtender ID="ColorPickerExtender1" runat="server" Enabled="True" PopupButtonID="Button1" SelectedColor="33ffcc" TargetControlID="TextBox1" SampleControlID="Label1" OnClientColorSelectionChanged="colorChanged"> </cc1:ColorPickerExtender> </div> <script type="text/javascript"> //This code must be placed below the ScriptManager, otherwise the "Sys" cannot be used because it is undefined. Sys.Application.add_init(function() { // Store the color validation Regex in a "static" object off of // AjaxControlToolkit.ColorPickerBehavior. If this _colorRegex object hasn't been // created yet, initialize it for the first time. if (!AjaxControlToolkit.ColorPickerBehavior._colorRegex) { AjaxControlToolkit.ColorPickerBehavior._colorRegex = new RegExp('^[A-Fa-f0-9]{6}$'); } }); function colorChanged(sender) { sender.get_element().style.color = "#" + sender.get_selectedColor(); } </script> </form> </body> </html>If my suggestion can make sense, I recommend that you post this issue to the IssueTracker of the CodePlex to get further help and make sure whether this is a design issue or not.
http://www.codeplex.com/AjaxControlToolkit/WorkItem/AdvancedList.aspx
Best regards,
Zhi-Qiang Ni
Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as
Answer” if a marked post does not actually answer your question.