ColorPickerExtender fails when using SelectedColor

Colorpickerextender stops working when I set SelectedColor. Is this a bug or am I doing something wrong?

<asp:Label ID="Label1" Text="Color" runat="server" />
    <asp:TextBox ID="TextBox1" runat="server" />
    <ajaxToolkit:ColorPickerExtender runat="server"
        ID="ColorPickerExtender1"
        TargetControlID="TextBox1"
        SampleControlID="Label1"
        SelectedColor="000000"
        OnClientColorSelectionChanged="colorChanged" />

Re: ColorPickerExtender fails when using SelectedColor

Try referring here

http://www.aspsnippets.com/post/2009/05/16/AJAX-Control-Toolkit-Color-Picker-Control-in-ASPNet.aspx

Re: ColorPickerExtender fails when using SelectedColor

no that didnt help. I dont have any problems getting it to work UNTIL i add SelectedColor. Anyone else having this problem? I tried to exchange the label to a div in my code thinking that could it, but without luck. Try it yourself.

Thanks

Re: ColorPickerExtender fails when using SelectedColor

no? Can I get confirmation that this is working for some people? Today I downloaded the new toolkit release and it still doesnt work for me. I must be doing something wrong but there isnt much to play with. I created a new page with the above code for testing purpose, it works fine until I add SelectedColor.

some feedback please, thanks.

Re: ColorPickerExtender fails when using SelectedColor

I guess it's working for everyone else. Someone please say SelectedColor is working for you and please post the most simple example possible where this is working so that I know Im doing something wrong. I cant get it to work but noone seems to have this problem but me. :(

Re: ColorPickerExtender fails when using SelectedColor

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 ColorPickerBehaviors 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

Re: ColorPickerExtender fails when using SelectedColor

amazing! thank you for taking time to figure this out. :)

Re: ColorPickerExtender fails when using SelectedColor

Hi all,

I tried to set the ajax colorpicker SelectedColor property in the code behind, and I'm getting the same error.

I tried to add this js code as recommended above:

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}$');
        }
    });

But now I'm getting the error "AjaxControlToolkit" is not defined.

Can anyone help?!

Re: ColorPickerExtender fails when using SelectedColor

Tibyan

Hi all,

I tried to set the ajax colorpicker SelectedColor property in the code behind, and I'm getting the same error.

I tried to add this js code as recommended above:

<div class="dp-highlighter"><div class="bar"><div class="tools">view plaincopy to clipboardprint?
</div></div>

<font size="2">    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}

);
        }
    });  </font>
</div>
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}




);
        }
    });
But now I'm getting the error "AjaxControlToolkit" is not defined.

Can anyone help?!

Did u put it inside script tags? <script type="text/javascript"> </script>

Re: ColorPickerExtender fails when using SelectedColor

It worked thanks

Re: ColorPickerExtender fails when using SelectedColor

I made some minor changes, and now it works

<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 (!Sys.Extended.UI.ColorPickerBehavior._colorRegex) {
            Sys.Extended.UI.ColorPickerBehavior._colorRegex = new RegExp('^[A-Fa-f0-9]{6}$');
        }
    });
</script>