CodeProject: ASP.NET Color Picker. Free source code and programming help

Report Article

Discuss

Send to a friend

5 votes for this Article.

Popularity: 2.91 Rating: 4.17 out of 5

Note: This is an unedited contribution. If this article is inappropriate, needs attention or copies someone else's work without reference then please Report This Article

Download source files - 32 Kb

Sample Image - ColorPickerNET.gif

On a recent project I needed an ASP.NET color picker. I created an ASP.NET 2.0 Webcontrol wich renders some HTML, CSS and Javascript. No external files or libraries need to be included.

Using the code

Extract the zipfile and open the solution in Visual Studio 2005. Run the testpage (default.aspx).

The color picker is a table with a lot of cells that have (websafe) background colors:

colorpickerdiv += "<div id=\"colorpicker\">";
colorpickerdiv += "     <table cellpadding=\"0\" cellspacing=\"0\" onclick=\"javascript:ColorPickerOnColorClick(event);\">";
string[] websafecolorlist = {"FFFFFF","CCCCCC","999999","666666","333333","000000","FFCC00","FF9900","FF6600","FF3300","FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF",
        "99CC00","FFFFFF","FFFFFF","FFFFFF","FFFFFF","CC9900","FFCC33","FFCC66","FF9966","FF6633","CC3300","FFFFFF","FFFFFF","FFFFFF","FFFFFF","CC0033",
        "CCFF00","CCFF33","333300","666600","999900","CCCC00","FFFF00","CC9933","CC6633","330000","660000","990000","CC0000","FF0000","FF3366","FF0033",
        "99FF00","CCFF66","99CC33","666633","999933","CCCC33","FFFF33","996600","996600","663333","993333","CC3333","FF3333","CC3366","FF6699","FF0066",
        "66FF00","99FF66","66CC33","669900","999966","CCCC66","FFFF66","996633","663300","996666","CC6666","FF6666","990033","CC3399","FF66CC","FF0099",
        "33FF00","66FF33","339900","66CC00","99FF33","CCCC99","FFFF99","CC9966","CC6600","CC9999","FF9999","FF3399","CC0066","990066","FF33CC","FF00CC",
        "00CC00","33CC00","336600","669933","99CC66","CCFF99","FFFFCC","FFCC99","FF9933","FFCCCC","FF99CC","CC6699","993366","660033","CC0099","330033",
        "33CC33","66CC66","00FF00","33FF33","66FF66","99FF99","CCFFCC","FFFFFF","FFFFFF","FFFFFF","CC99CC","996699","993399","990099","663366","660066",
        "006600","336633","009900","339933","669966","99CC99","FFFFFF","FFFFFF","FFFFFF","FFCCFF","FF99FF","FF66FF","FF33FF","FF00FF","CC66CC","CC33CC",
        "003300","00CC33","006633","339966","66CC99","99FFCC","CCFFFF","3399FF","99CCFF","CCCCFF","CC99FF","9966CC","663399","330066","9900CC","CC00CC",
        "00FF33","33FF66","009933","00CC66","33FF99","99FFFF","99CCCC","0066CC","6699CC","9999FF","9999CC","9933FF","6600CC","660099","CC33FF","CC00FF",
        "00FF66","66FF99","33CC66","009966","66FFFF","66CCCC","669999","003366","336699","6666FF","6666CC","666699","330099","9933CC","CC66FF","9900FF",
        "00FF99","66FFCC","33CC99","33FFFF","33CCCC","339999","336666","006699","003399","3333FF","3333CC","333399","333366","6633CC","9966FF","6600FF",
        "00FFCC","33FFCC","00FFFF","00CCCC","009999","006666","003333","3399CC","3366CC","0000FF","0000CC","000099","000066","000033","6633FF","3300FF",
        "00CC99","FFFFFF","FFFFFF","FFFFFF","FFFFFF","0099CC","33CCFF","66CCFF","6699FF","3366FF","0033CC","FFFFFF","FFFFFF","FFFFFF","FFFFFF","3300CC",
        "FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","00CCFF","0099FF","0066FF","0033FF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF"};
int rowcounter = 0;
bool needrowstart = true;
for (int i = 0; i < websafecolorlist.Length; i ++)
{
    if (needrowstart)
    {
        needrowstart = false;
        colorpickerdiv += "            <tr> ";
    }
    string color = "#" + websafecolorlist[i];
    colorpickerdiv += "                <td style=\"background-color:" + color + "\"></td>";
    if (rowcounter++ == 16)
    {
        colorpickerdiv += "            </tr>";
        needrowstart = true;
        rowcounter = 0;
    }
}
colorpickerdiv += "     </table>";
colorpickerdiv += "</div>";

if (!Page.ClientScript.IsClientScriptBlockRegistered("colorpickerdiv"))
    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "colorpickerdiv", colorpickerdiv);

The code above is a bit heavy and can be simplified but the array of colors make a nice image together. The table is surrounded by an invisible div. The table will be visible when the following code is fired:

opendialogscript += "    var ActiveColorPicker;\n";
opendialogscript += "    function OpenColorPicker(id)\n";
opendialogscript += "    {\n";
opendialogscript += "        ActiveColorPicker=id; \n";
opendialogscript += "        var colorpickerdiv=document.getElementById('colorpicker');\n";
opendialogscript += "        colorpickerdiv.style.visibility='visible';\n";
opendialogscript += "        colorpickerdiv.style.left=ActiveColorPicker.style.left+ActiveColorPicker.style.width;\n";
opendialogscript += "        colorpickerdiv.style.top=window.event.y;\n";
opendialogscript += "        colorpickerdiv.style.left=window.event.x;\n";
opendialogscript += "    }\n";

And made invisible when a color has been clicked:

opendialogscript += "    function ColorPickerOnColorClick(e)\n";
opendialogscript += "    {\n";
opendialogscript += "        var td = (e.target) ? e.target : e.srcElement; \n";
opendialogscript += "        var color=td.style.backgroundColor; \n";
opendialogscript += "        ActiveColorPicker.style.backgroundColor=color;\n";
opendialogscript += "        ActiveColorPicker.style.color=color;\n";
opendialogscript += "        ActiveColorPicker.value=color;\n";
opendialogscript += "        var colorpickerdiv=document.getElementById('colorpicker');\n";
opendialogscript += "        colorpickerdiv.style.visibility='hidden';\n";
opendialogscript += "    }\n";

The following code is needed to render a clickable rectangle. The ID of the control is rendered with this.UniqueID. To store the color value, I use the value attribute from the textbox.

protected override void Render(HtmlTextWriter output)
{
    string html = "";
    string onclicker="onclick=\"javascript:OpenColorPicker(" + this.UniqueID + ");\"";
    html += "<input style=\"background-color:" + SelectedHexValue + ";color:" + SelectedHexValue + ";\" class=\"colorpickerbutton\" " + onclicker + " readonly=\"true\" class=\"lookupmodalvalue\" type=\"text\" name=\"" + this.UniqueID + "\" value=\"" + SelectedHexValue + "\">";
    output.Write(html);
}

Retrieving the value after a postback is done in LoadPostData

public bool LoadPostData(String postDataKey, NameValueCollection values)
{
    SelectedHexValue = values[this.UniqueID];
    return false;
}

The color code can be get or set with the SelectedHexValue property. If you need a Color object or RGB int, just add properties that convert the HEX-code.

Label1.Text = ColorPicker1.SelectedHexValue;

Points of Interest

About web controls: LoadPostData is a tricky event. In order for it to fire you must name of one of the html controls exactly like the UniqueID of the control!

If you have any comments regarding the code, please feel free to email me at: colorpicker@toverstudio.nl

History

2006-07-11 Release 1.0

About Loek van den Ouweland

Loek van den Ouweland is a freelance Web Developer from The Netherlands.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Toverstudio

Loek van den Ouweland is a freelance Web Developer from The Netherlands.

Occupation:	Web Developer
Location:	Netherlands

Other popular ASP.NET articles:

Multiple File Upload With Progress Bar Using Flash and ASP.NET
How to use Flash to upload multiple files in a medium-trust hosting environment
CAPTCHA Image
Using CAPTCHA images to prevent automated form submission.
10 ASP.NET Performance and Scalability Secrets
10 easy ways to make ASP.NET and AJAX websites faster, more scalable and support more traffic at lower cost
Paging of Large Resultsets in ASP.NET
An article about optimization and performance testing of MS SQL Server 2000 stored procedures used for paging of large resultsets in ASP.NET
File Upload with ASP.NET
This article shows you how work with uploading of the files using ASP.NET and C#.

Article Top

You must Sign In to use this message board.

Msgs 1 to 21 of 21 (Total in Forum: 21) (Refresh)

FirstPrevNext

can u rectify the problem in the following article

harish448

6:16 6 Sep '08

hi, load post data event is not working properly ,but in u r color picker is working fine. can u rectify the problem. http://www.codeproject.com/KB/custom-controls/WS_ColorPicker.aspx[^]
Sign In·View Thread·PermaLink

Fix the position in firefox

sudjp

1:23 29 May '08

The color picker is working fine. But when used in Firefox it gets displayed at the bottom of the web page. Thanks and waiting eagerly for your response on this.
Sign In·View Thread·PermaLink

To Make Compatible with Firefox

Eyezed

23:34 13 Mar '08

Add the following to the beginning of the javascript mentioned in OnPreRender

opendialogscript += @"var IE = false;
	        if (navigator.appName == 'Microsoft Internet Explorer'){  IE = true;}
	        if (!IE){document.captureEvents(Event.MOUSEMOVE)}
	        document.onmousemove = getMouseXY;
            var tmpX;
            var tmpY;
            var iL;
            var iV;
	        function getMouseXY(m){

  		        if (IE)	{
			          tmpX = event.clientX;
  			          tmpY = event.clientY;
			        }	
 		        else 	{
    			          tmpX = m.pageX;
			          tmpY = m.pageY;
  			        }  
		        if (!document.body.scrollTop)
			        {
			          iL = document.documentElement.scrollLeft;	
			          iV = document.documentElement.scrollTop;
			        }
		        else 	{
			          iL = document.body.scrollLeft;	
			          iV = document.body.scrollTop;	
			        }
  	        }
";

Also, Replace :


opendialogscript += "        colorpickerdiv.style.top=document.documentElement.scrollTop+window.event.y;\n";
opendialogscript += "        colorpickerdiv.style.left=document.documentElement.scrollLeft+window.event.x;\n";

With:


opendialogscript += "           colorpickerdiv.style.left= (tmpX+iL) +'px';\n";
opendialogscript += "           colorpickerdiv.style.top= (tmpY+iV)  + 'px';\n";

Great code, otherwise!!!

Close the color picker

Bruno Meirelles

2:39 23 Nov '07

Hi. Congratulations for the excellent Color Picker. The only thing that i want to modify is to close the color picker when the user click out of the div too, because now it only close when the user choose a color. I don't want do obligate him to choose. Somebody has an idea ? Thanks.
Sign In·View Thread·PermaLink	1.00/5 (1 vote)

Control within datagrid

billfoster

1:59 26 Sep '07

Great control and works well but I want to use it within a datagrid and that seems to generate some problems. Any help would be appreciated. bill
Sign In·View Thread·PermaLink

Nice work

marwamay

0:50 2 Jul '07

thx was really helpful
Sign In·View Thread·PermaLink

Popup Position when page has scrolled...

jhornb

11:54 20 Jun '07

I like this control, it is perfect for what I am trying to do. Thank You!

However, if you have the control on a page that has been scrolled at all, the position will be off for the popup.

I was able to easily fix this with the following code change (found in OnPreRender):

opendialogscript += " colorpickerdiv.style.top=document.documentElement.scrollTop+window.event.y;\n";
opendialogscript += " colorpickerdiv.style.top=document.documentElement.scrollLeft+window.event.x;\n";

I'm new to this so if you see any issues or a better way to take care of the problem, let me know.

According to this site this scroll position stuff may not work for all browsers: http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html[^]

try this

Viper3000

15:36 3 Jun '07

i'm using this color picker xcesscolorpicker Sing it.
Sign In·View Thread·PermaLink

How To retrieve hexadecimal values?

Ibrahim Dwaikat

4:11 1 Feb '07

How can i retrieve hexadecimal values (#XXXXXXX)???????
Sign In·View Thread·PermaLink

Re: How To retrieve hexadecimal values? [modified]

Scott T.

5:01 9 Feb '07

It does in Internet Explorer. But not in Mozilla... You have to update to the following...

Update to the following....

            opendialogscript += "    function ColorPickerOnColorClick(e)\n";
            opendialogscript += "    {\n";
            opendialogscript += "        var td = (e.target) ? e.target : e.srcElement; \n";
            opendialogscript += "        var color=(td.style.backgroundColor.substr(0,1)!='r') ? td.style.backgroundColor : td.style.backgroundColor.hex();" & vbCrLf
            opendialogscript += "        ActiveColorPicker.style.backgroundColor=color;\n";
            opendialogscript += "        ActiveColorPicker.style.color=color;\n";
            opendialogscript += "        ActiveColorPicker.value=color;\n";
            opendialogscript += "        var colorpickerdiv=document.getElementById('colorpicker');\n";
            opendialogscript += "        colorpickerdiv.style.visibility='hidden';\n";
            opendialogscript += "    }\n";
            opendialogscript += "    String.prototype.hex = function()\n";
            opendialogscript += "    {\n";
            opendialogscript += "        var b=\"\", x=this;\n";
            opendialogscript += "        for (a in x=x.substr(4,x.length-5).split(\", \"))\n";
            opendialogscript += "        {\n";
            opendialogscript += "            b+=((x[a]<16)?\"0\":\"\")+(x[a]&0xff).toString(16); }\n";
            opendialogscript += "            return \"#\"+b;\n";
            opendialogscript += "        }\n";

-- modified at 12:54 Friday 9th February, 2007

Re: How To retrieve hexadecimal values?

Toverstudio

0:28 26 Feb '07

Thanks for the update!
Sign In·View Thread·PermaLink

Re: How To retrieve hexadecimal values?

arpitcompro

21:11 13 Mar '07

Hi , thanks for the code ...But i am still having a query ...
I need to display the hex code of the color selected by the user from the table.
U have provided the folowing addition to the code

opendialogscript += " String.prototype.hex = function()\n";
opendialogscript += " {\n";
opendialogscript += " var b=\"\", x=this;\n";
opendialogscript += " for (a in x=x.substr(4,x.length-5).split(\", \"))\n";
opendialogscript += " {\n";
opendialogscript += " b+=((x[a]<16)?\"0\":\"\")+(x[a]&0xff).toString(16); }\n";
opendialogscript += " return \"#\"+b;\n";
opendialogscript += " }\n";

But can u please tell me how can I display the hex code in a label without POSTBACKING the page to the server ...
I mean I have a label and I need that the label be updated by the hex code as soon as the user selects the color from the color table ..
PLz help

Re: How To retrieve hexadecimal values?

Scott T.

11:17 14 Mar '07

I provided more additions than just that one little block of code. Please see my original post and make sure you make the other changes.
Sign In·View Thread·PermaLink

Re: How To retrieve hexadecimal values?

arpitcompro

2:29 15 Mar '07

Hi Scott U say that u hav provided some more additions to the code but I cant find anything more there in ur original post other than the block that I hav mentioned in my post ....I think that u posted something nd then modified it PLease chk
Sign In·View Thread·PermaLink

Re: How To retrieve hexadecimal values?

Scott T.

3:29 15 Mar '07

You only posted the hex function. I also modified the ColorPickerOnColorClick function in the original code which is posted in the same post that the hex code is posted. Open your eyes.
Sign In·View Thread·PermaLink

Re: How To retrieve hexadecimal values?

arpitcompro

4:00 15 Mar '07

Hey Hey Hey , Y U getting aggressive.......
I only quoted the changed text ..nd not the whole ColorPickerOnColorClick function

And I think that u dint get my problem .....
I am again stating my problem ...Hoping for a positive response from u ..

Refer to the default.aspx page in the original code provided by codeproject forum.
There is a button(Id=Button1).I deleted that button.
There is a label(Id=Label1). The hex code of the color gets displayed in this label when the boton is pressed...
Now as I have deleted the button, so Is there a way out by which I can display the hex code of the color.
I mean I want to somehow get the value of the variable "SelectedHexValue" so that I can get the color code .

Hope u got my problem

Re: How To retrieve hexadecimal values?

Scott T.

5:07 15 Mar '07

What I am saying is that there is changed code inside the ColorPickerOnColorClick function.

Sorry I do not have this page setup and able to see what the original page looked like. You need to make the changes I suggested in the above function. To do what you want you may want to remove the lines where it sets the background color for the ActiveColorPickerReference and then maybe add a line that says:

ActiveColorPicker.text=color;\n";

I do not know if this will work as I said I do not have the original file. I was getting frustrated because you seemed to IGNORE the fact that I changed the ColorPickerOnColorClick function and partially because I forgot how the original project behaved and did not fully understand what you were asking. I hope you see the additional reference to the hex prototype in that function. Without it what you want to do will not work. You quoted the hex prototype but it has little to do with your suggestion. This is very simple javascript for what you want to do with the color after the hex prototype works on it and adds it to the "color" variable. But like I said I don't have the original project to mess with and I really do not know that much about javascript. The above code will probably work for a text box but not likely for an asp:Label which is a span. Check the below link for code to update an asp:Label i.e. span.

http://p2p.wrox.com/topic.asp?TOPIC_ID=1897

2.00/5 (1 vote)

Nice!

braham5

9:57 7 Oct '06

Nice, many thanks for the control! I was looking for a control like this, as you said for a color picker with a nice selection of colors (not ALL colors), for a site I'm working on.

Only comment I had was I made a slight change to my copy of the code, to remove all spaces and newlines (I can live with the ugly HTML). Cut the overhead of the control from ~15k to ~11k. May not seem like a lot, but I have a page where I'm perhaps putting 10 of these on at once.

Still, way cool and thanks Cool

Re: Nice!

Toverstudio

0:28 26 Feb '07

Your welcome. Glad I could help Can I see the color picker in use online?
Sign In·View Thread·PermaLink

generating colors

omar_866

22:02 22 Jul '06

Nice... But dont you think its better to use a function or a piece of code to generate the colors list? get it?
Sign In·View Thread·PermaLink

Re: generating colors

Toverstudio

23:58 25 Jul '06

Hi, I did that in the first draft. It worked fine and the code looked better but this method shows a nicer pallet of colors on the screen. regards, Loek
Sign In·View Thread·PermaLink	2.00/5 (1 vote)

Last Visit: Wednesday, December 3, 2008 9:15 PM Last Update:Wednesday, December 3, 2008 9:15 PM

General News Question Answer Joke Rant Admin