ASP.NET Color Picker Web Server Control

• Download source - 1.2 MB
• Download binaries - 13.5 KB

Introduction

It is difficult to find a decent color picker control for ASP.NET. However, there are plenty of pure JavaScript color picker controls. I decided to take one of them and convert it into an ASP.NET web server control. As a base, I took the dhtmlgoodies advanced color picker.

Project Setup

First, let's do New Project ->ASP.NET Server Control. By default, the name of the project would be the same as the name of the default namespace. I called my project WebControls, and renamed ServerControl1.cs to ColorPicker.cs. I changed default namespace to Karpach.WebControls, as well as assembly name. Then, I added to the project the images, JavaScript, and styles supplied by dhtmlgoodies.

Then, I clicked on each file's properties and changed the Build Action from Content to Embedded Resource. I also renamed some of the files.

AssemblyInfo.cs

I registered all the resources like this:

[assembly: System.Web.UI.WebResource("Karpach.WebControls.Images.SliderHandle.gif",
    "img/gif")]
[assembly: System.Web.UI.WebResource("Karpach.WebControls.Images.TabCenterActive.gif",
    "img/gif")]
[assembly: System.Web.UI.WebResource("Karpach.WebControls.Images.TabLeftActive.gif",
    "img/gif")]
[assembly: System.Web.UI.WebResource("Karpach.WebControls.Images.TabLeftInactive.gif",
    "img/gif")]
[assembly: System.Web.UI.WebResource("Karpach.WebControls.Images.TabRightActive.gif",
    "img/gif")]
[assembly: System.Web.UI.WebResource("Karpach.WebControls.Images.TabRightInactive.gif",
    "img/gif")]
[assembly: System.Web.UI.WebResource("Karpach.WebControls.Images.ColorPickerIcon.jpg",
    "img/jpeg")]

[assembly: System.Web.UI.WebResource("Karpach.WebControls.Styles.ColorPicker.css",
    "text/css")]

[assembly: System.Web.UI.WebResource("Karpach.WebControls.Javascript.ColorPicker.js",
    "text/js")]

As you might have noticed, System.Web.UI.WebResource, the first parameter has the following signature:

[Assembly Name].[Folder].[File Name]

This is very important, since it is not documented even in MSDN.

ColorPicker.cs

I modified ToolboxData to look like this:

[ToolboxData("<{0}:ColorPicker runat="server">")]

Next, I wanted a custom icon in the Visual Studio Toolbox. After ToolboxData, I added the following line...

[System.Drawing.ToolboxBitmap(typeof(ColorPicker),"Images.color_picker_icon.jpg")]

... where the first parameter is the type of the control and the second parameter is the icon file name used in AssemblyInfo.cs.

Originally color picker had two JavaScript files: color_functions.js and js_color_picker_v2.js. I combined them in one file, ColorPicker.js. Those files had a bunch of functions. I combined everything in one JavaScript class, exposed some public properties and one public function ShowColorPicker.

function ColorPicker(options)
{
    // Public properties
    this.FormWidgetAmountSliderHandleImage = options.FormWidgetAmountSliderHandleImage;
    this.TabRightActiveImage = options.TabRightActiveImage;
    this.TabRightInactiveImage = options.TabRightInactiveImage;
    this.TabLeftActiveImage = options.TabLeftActiveImage;
    this.TabLeftInactiveImage = options.TabLeftInactiveImage;
    this.AutoPostBack = options.AutoPostBack;
    this.AutoPostBackReference = options.AutoPostBackReference;
    this.PopupPosition = options.PopupPosition;

    // Public methods

    this.ShowColorPicker = function(inputObj, formField)
    {
	  //.....
	}
	// Private variables
	// ....

	// Private functions
    // ....
}

After some feedback, I had to fix JavaScript in order to support ASP.NET AJAX UpdatePanel and ModalPopup extender.

Then, I needed to load the stored resources from the DLL into JavaScript class. The best event for this is OnInit:

// Javascript
string colorFunctions = Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), 
				"Karpach.WebControls.Javascript.ColorPicker.js");
Page.ClientScript.RegisterClientScriptInclude("ColorPicker.js", colorFunctions);

// Create ColorPicker object
string script = string.Format(@"
var colorPicker = new ColorPicker({{
FormWidgetAmountSliderHandleImage : '{0}',
TabRightActiveImage : '{1}',
TabRightInactiveImage : '{2}',
TabLeftActiveImage : '{3}',
TabLeftInactiveImage : '{4}',
AutoPostBack : {5},
AutoPostBackReference : ""{6}"",
PopupPosition : {7}
}});
", Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), 
		"Karpach.WebControls.Images.SliderHandle.gif")
 , Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), 
		"Karpach.WebControls.Images.TabRightActive.gif")
 , Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), 
		"Karpach.WebControls.Images.TabRightInactive.gif")
 , Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), 
		"Karpach.WebControls.Images.TabLeftActive.gif")
 , Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), 
		"Karpach.WebControls.Images.TabLeftInactive.gif")
 , AutoPostBack?"true":"false"
 , Page.ClientScript.GetPostBackEventReference(this,"")
 , (int)PopupPosition
 );

Page.ClientScript.RegisterStartupScript(Page.GetType(), "InitColorPicker", script, true);
if (!DesignMode && Page.Header != null)
{
	RegisterCSSInclude(Page.Header);
}

Where RegisterCSSInclude is a following helper method:

private void RegisterCSSInclude(Control target)
{
    // CSS
    bool linkIncluded = false;
    foreach (Control c in target.Controls)
    {
        if (c.ID == "ControlPickerStyle")
        {
            linkIncluded = true;
        }
    }
    if (!linkIncluded)
    {
        HtmlGenericControl csslink = new HtmlGenericControl("link");
        csslink.ID = "ControlPickerStyle";
        csslink.Attributes.Add("href", Page.ClientScript.GetWebResourceUrl
	    (typeof(ColorPicker), "Karpach.WebControls.Styles.ColorPicker.css"));
        csslink.Attributes.Add("type", "text/css");
        csslink.Attributes.Add("rel", "stylesheet");
        csslink.EnableViewState = false;
        target.Controls.Add(csslink);
    }
}

Then I overrode the Render event of WebControl class in order to render the control HTML.

PlaceHolder plh = new PlaceHolder();
if (DesignMode || Page.Header == null)
{
    RegisterCSSInclude(plh);
}
Table table = new Table();
table.Rows.Add(new TableRow());
table.Rows[0].Cells.Add(new TableCell());
table.Rows[0].Cells.Add(new TableCell());
HtmlGenericControl txt = new HtmlGenericControl("input");
txt.EnableViewState = false;
txt.Attributes.CssStyle.Add(HtmlTextWriterStyle.Color, Color);
txt.Attributes.Add("maxlength","15");
txt.Attributes.Add("size", "15");
txt.Attributes.Add("value", Color);
txt.Attributes.Add("id",ColorInputControlClientId);
txt.Attributes.Add("name",this.UniqueID);
table.Rows[0].Cells[0].Controls.Add(txt);
HtmlInputImage btn = new HtmlInputImage();
btn.Src = Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), 
		"Karpach.WebControls.Images.ColorPickerIcon.jpg");
btn.Attributes.Add("onclick", string.Format("colorPicker.ShowColorPicker
    (this,document.getElementById('{0}'));return false;", ColorInputControlClientId));
HtmlGenericControl container = new HtmlGenericControl("div");
container.EnableViewState = false;
container.Controls.Add(btn);
container.Attributes.CssStyle.Add(HtmlTextWriterStyle.Position, "relative");
container.Attributes.CssStyle.Add(HtmlTextWriterStyle.Display, "block");
table.Rows[0].Cells[1].Controls.Add(container);
plh.Controls.Add(table);
plh.RenderControl(output); 

There are a few ways how you can save postback value of color picker. However I think the best way is to implement IPostBackDataHandler interface.

public bool LoadPostData(string postDataKey,NameValueCollection postCollection)
{
    String presentValue = Color;
    String postedValue = postCollection[postDataKey];

    if (presentValue == null || !presentValue.Equals(postedValue))
    {
        Color = postedValue;
        return true;
    }
    return false;
}

public virtual void RaisePostDataChangedEvent()
{
    OnColorChanged(EventArgs.Empty);
}

public void OnColorChanged(EventArgs e)
{
    if (ColorChanged != null)
        ColorChanged(this, e);
}

LoadPostData method will be called during each postback, when postback form has token with key this.UniqueID. As you can see above rendered input tag has name attribute this.UniqueID.

Build.proj

Now, the final touch: Minification of JavaScript and CSS. I used Yahoo YUI compressor and Microsoft MSBuild. Here is the final MSbuild file:

<?xml version="1.0" encoding="utf-8" ?>
<Project ToolsVersion="3.5" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">

  <PropertyGroup>
    <MSBuildCommunityTasksPath>..\References</MSBuildCommunityTasksPath>
    <ProjectName>WebControls</ProjectName>
  </PropertyGroup>
  <Target Name="Compress">

    <Message Text="Create temp files ..." />
    <Copy SourceFiles=".\$(ProjectName)\Javascript\ColorPicker.js"
        DestinationFiles=".\$(ProjectName)\Javascript\ColorPicker.js.full"/>
    <Copy SourceFiles=".\$(ProjectName)\Styles\ColorPicker.css"
        DestinationFiles=".\$(ProjectName)\Styles\ColorPicker.css.full"/>
    <Exec Command=
       "java -jar yuicompressor-2.4.2.jar --type js .\$(ProjectName)\
       Javascript\ColorPicker.js.full >.\$(ProjectName)\Javascript\ColorPicker.js"/>

    <Exec Command=
       "java -jar yuicompressor-2.4.2.jar --type css .\$(ProjectName)\Styles\
       ColorPicker.css.full >.\$(ProjectName)\Styles\ColorPicker.css"/>
  </Target>
  <Import Project=".\References\MSBuild.Community.Tasks.targets" />
  <Target Name="Build" DependsOnTargets="Compress">

    <Message Text="Building Project" />
    <MSBuild Projects="./$(ProjectName)/$(ProjectName).sln"
        Properties="Configuration=Release;Platform=Any CPU" />
  </Target>

</Project>

Now you even don't need Visual Studio to compile DLL. All that you need is .NET 2.0 installed and then the following console script will do the compilation:

%SystemRoot%\Microsoft.NET\Framework\v2.0.50727\MSBuild.exe  Build.proj /t:Build

Per requests below, I added PopupPosition property, so you can specify position of ColorPicker popup (top left, top right, bottom left, bottom right - default).

I also added AutoPostBack property and ColorChanged event.

• The ColorPicker control demo page

You must Sign In to use this message board.

FAQ    Noise Tolerance Very HighHighMediumLowVery Low   Layout Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview   Per page 102550

Msgs 1 to 25 of 82 (Total in Forum: 82) (Refresh) FirstPrevNext

Awesome Control! A few bugs? Or just me? bjahelka 9:34 29 Jan '10   Viktar, this control is totally bitchin. Thanks for taking the time to code it! I'm using multiple ColorPickers on my page. At first it appeared that the PopupPosition property wasn't working, then I found out that if you set ALL of the ColorPicker controls to have the same PopupPosition, then it will work. Wondering why I couldn't select each one independently. The above behavior was noticed because the popup was being cut off on my page. I have these controls on the left side of the page (in a div), and on the right side I have a preview pane with the proposed color changes (also in a div). When the color picker poped up, it would only show in the part of the color picker in the containing div. I thought maybe it had to do with a funky z-order being set somewhere in my css. Couldn't find anything screwy, and besides, the style on this control had a z-order of 10001, so it ~should~ show. If you have any idea on that, I'd like to hear it. Would be great to get this to work with the RegularExpressionValidator. Is there some default property setting that could be implemented with this custom control to make it work with the built in ASP.NET Validators? Or do they just plain not work with custom controls (what about exposing the textbox inside the ColorPicker somehow)? Would be very nice if the sliders would be pre-set to the value that is already in the text box. Click the icon to open the color picker, would be nice if you clicked it again it would close the color picker. I'm going to tackle the last two and see if I can figure out how to make those work and will post code if I figure something out. But the first two are a little beyond what I know to be sure. Thanks again for the wonderful control! Sign In·View Thread·PermaLink ColorPicker in gridview EditItemTemplate judyIsk 23:45 21 Jul '09   Hi, Thanx for the nice control. When i place it just straight on my aspx page - works very nicely, but i need it in my gridview - editItemTemplate and in my FooterTemplate - here the ColorPicker control CRASHES. this is the Javascript Error i get when clicking the button to choose a color:Microsoft JScript runtime error: 'colorPicker' is undefined is it a bug? can it be fixed? Sign In·View Thread·PermaLink Re: ColorPicker in gridview EditItemTemplate Viktar Karpach 4:36 23 Jul '09   Did you use latest version from ColorPicker demo page? I'll try to reproduce an error. Usually I don't use ASP.NET DataGrids, so probably I missed this bug. Regards, Viktar Karpach MCTS .NET 2.0 Web Application, MCPD Web Developer ASP.NET C# Technical Blog Sign In·View Thread·PermaLink Re: ColorPicker in gridview EditItemTemplate judyIsk 22:14 25 Jul '09   Hi, yes. i downloaded: Download ASP.NET Color Picker v.1.4.10423.1 from the Demo site. Sign In·View Thread·PermaLink Re: ColorPicker in gridview EditItemTemplate Viktar Karpach 13:07 26 Jul '09   I build mine GridView example. It works no errors in IE7-8, Firefox 3.5. Take a look GridViewTest_WebControls.zip. May be I am missing something. Regards, Viktar Karpach MCTS .NET 2.0 Web Application, MCPD Web Developer ASP.NET C# Technical Blog Sign In·View Thread·PermaLink Bug in Slider Member 5406779 6:20 30 Jun '09   I am currently using your project (works great btw) but I noticed a small bug that I thought you may or may not want to fix. On the Slider, if you manually type in a number greater than 255 the knob will continue moving "down the line." For example, try 300 and the knob will show up over the text or try 2555 and the knob is completely gone. I did the following to a function to fix this bug. Feel free to use this or to use a different method. function positionSliderImage(e, theIndex, inputObj) { if (this) inputObj = this; if (!theIndex) theIndex = inputObj.getAttribute('sliderIndex'); var handleImg = document.getElementById('slider_handle' + theIndex); var ratio = sliderObjectArray[theIndex]['width'] / (sliderObjectArray[theIndex]['max'] - sliderObjectArray[theIndex]['min']); var intValue = parseInt(sliderObjectArray[theIndex]['formTarget'].value, 10); var currentValue = intValue - sliderObjectArray[theIndex]['min']; if(currentValue > sliderObjectArray[theIndex]['max']) { currentValue = sliderObjectArray[theIndex]['max']; sliderObjectArray[theIndex]['formTarget'].value = currentValue; } else if (currentValue < sliderObjectArray[theIndex]['min']) { currentValue = sliderObjectArray[theIndex]['min']; sliderObjectArray[theIndex]['formTarget'].value = currentValue; } else { sliderObjectArray[theIndex]['formTarget'].value = currentValue; } handleImg.style.left = currentValue * ratio + 'px'; setColorByRGB(); } Other than that I am really pleased with what you wrote. Thanks for your hard work on it. -Dan Calkins (daniel.m.calkins [at] gmail.com) Sign In·View Thread·PermaLink Re: Bug in Slider Viktar Karpach 7:44 1 Jul '09   Thank you for a bug report. I will include your code in next ASP.NET ColorPicker release. Currently I am waiting for my motherboard RMA come back from Gigabyte, so I am not doing any development at home. Also, I am planing to create ASP.NET validators support in my next release. Regards, Viktar Karpach MCTS .NET 2.0 Web Application, MCPD Web Developer ASP.NET C# Technical Blog Sign In·View Thread·PermaLink Multiple ColorPickers on same page Member 3014691 1:52 27 Mar '09   Hi Viktar, I'm using your control - which is very good, and works fine when there is only a single ColorPicker control on a page, however I have an page where I have multiple ColorPicker controls, they all work, but when a ColorPicker is ‘popped’ the icon from another ColorPicker shows through. Also if for instance, I have two ColorPicker controls and I pop the first one, the ‘popped’ window is in the correct place (relative to the clicked ColorPicker control), however if then click the second ColorPicker control, the window is ‘popped’ but in the first windows location, so it isn’t positioned relative to the clicked control. In addition another ‘nice to have’ option would be the ability to specify if the associated textbox could have its background colour set to the selected colour, when selecting pale colours (with a textbox background white) it is difficult to see the coloured text. Sign In·View Thread·PermaLink 3.67/5 (2 votes) Re: Multiple ColorPickers on same page ankit_vyas 19:48 21 Apr '09   Did you get fix for this. I am having same problem. Else control is great and works fine. Sign In·View Thread·PermaLink Re: Multiple ColorPickers on same page Member 3014691 22:28 21 Apr '09   Not yet - it's a shame because it works perfectly when there's only one control per page Sign In·View Thread·PermaLink Re: Multiple ColorPickers on same page Viktar Karpach 3:34 22 Apr '09   I didn't have a chance to fix it. I'll take a look tonight. It should be an easy fix. Regards, Viktar Karpach MCTS .NET 2.0 Web Application, MCPD Web Developer ASP.NET C# Technical Blog Sign In·View Thread·PermaLink Re: Multiple ColorPickers on same page ankit_vyas 13:36 22 Apr '09   It will be great if you can fix it. I recon it should be small bug as it's really really beautiful. When I show it to my partner they said it can't be free as it's great. If you fix, can you please put comment here that you fixed. Will wait for you. Thanks. Sign In·View Thread·PermaLink Re: Multiple ColorPickers on same page Viktar Karpach 20:42 23 Apr '09   It appeared that this is IE specific problem. It took me some time to solve it. Check ColorPicker demo page for latest release. Regards, Viktar Karpach MCTS .NET 2.0 Web Application, MCPD Web Developer ASP.NET C# Technical Blog Sign In·View Thread·PermaLink Re: Multiple ColorPickers on same page ankit_vyas 14:12 25 Apr '09   It works great now. Thanks Viktar for allocating your time for this error. Sign In·View Thread·PermaLink Re: Multiple ColorPickers on same page Member 3014691 1:33 1 May '09   Thanks Viktar - That's great!! Sign In·View Thread·PermaLink 2.00/5 (1 vote) Validating the control Member 1247149 0:10 19 Mar '09   Hi, Nice control, but it's a pitty that it doesn't work with normal ASP.NET validator controls... Wilco Sign In·View Thread·PermaLink Visibility dherrmann 1:18 17 Mar '09   Hi, I have your control in use the first time. I do the following: At start of my page the colorpicker is unvisible. But with a button I do in the click-event: colorpicker1.visible=not colorpicker1.visible (VB-Code) also: colorpicker1.backcolor=textbox1.backcolor It doesn't function... regards- Dietrich Sign In·View Thread·PermaLink Re: Visibility Viktar Karpach 4:35 17 Mar '09   Hi, You are right. I didn't implement visible and backcolor property. If you want to set or get colorpicker color then use color property. I'll implement both properties in next release. For now you can put colorpicker in PlaceHolder then hide/show PlaceHolder. Regards, Viktar Karpach MCTS .NET 2.0 Web Application, MCPD Web Developer ASP.NET C# Technical Blog Sign In·View Thread·PermaLink Search in your website Blumen 1:54 15 Mar '09   Hi Victor, How did you implement search in this website? I tried with Live search SearchDataSource, but I did not succeed, page was throwing some proxy error. Regards, Manu “The thing for you is a burial permit. You have only to speak and I will see that you get it.” Sign In·View Thread·PermaLink Re: Search in your website Viktar Karpach 9:49 16 Mar '09   Hi, Thank you for finding a bug. I analyzed error log and fixed an error. I am not sure what you tried to do with live search, but at least I fixed an exception. Regards, Viktar Karpach MCTS .NET 2.0 Web Application, MCPD Web Developer ASP.NET C# Technical Blog Sign In·View Thread·PermaLink AutoPostBack? Nick Tam 7:53 27 Feb '09   Hi Viktar: I've tried modifying your source code so that the control would have an autopostback option, but so far with no success. I'm trying to use and AJAX update panel to partially postback to the page so that the user doesn't have to click a button every time to select a color. Seems redundant since the user already selected a color in the palatte. Do you think you can help me in terms or what I need to get this option working? Thanks! Sign In·View Thread·PermaLink Re: AutoPostBack? Viktar Karpach 14:17 1 Mar '09   I added AutoPostBack property and ColorChanged event. You can get latest version on ColorPicker Demo page. Let me know if you have any problems. I think it's time to update this article Regards, Viktar Karpach MCTS .NET 2.0 Web Application, MCPD Web Developer ASP.NET C# Technical Blog Sign In·View Thread·PermaLink Re: AutoPostBack? nktm85 9:38 3 Mar '09   Wow! You are awesome... Thanks for the quickness in adding it! Sign In·View Thread·PermaLink Multiple Objects in page !! Member 4718992 5:45 9 Feb '09   Hi, I can't set multiple color pickers in a page. It raises an exception about ColorPickerStyle ID (in the head i guess). Could you help me ? Thanks. Sign In·View Thread·PermaLink Re: Multiple Objects in page !! Member 4337102 6:20 9 Feb '09   Hello Viktar, I am having the same problem. I was trying to use four color pickers in one page. Acutually, the actual error I am getting is the following: "Multiple controls with the same ID 'ColorPickerStyle' were found. FindControl requires that controls have unique IDs" Your help is appreciated as always. Thanks, Omar Sign In·View Thread·PermaLink

Last Visit: 13:05 9 Feb '10     Last Update: 13:05 9 Feb '10 1234 Next »