Sponsored

Friday, September 26, 2008

Color Picker ASP.NET AJAX extender control

I was looking for a client-side color picker control and found it extremely difficult to find something that would satisfy to my requirements. I have found plenty of pure JavaScript controls written with various levels of proficiency and there was even one ASP.NET color-picker control that I almost liked but still my major requirement was not satisfied: I was looking for AJAX .NET Extender control - easy to use and based on a solid and proven platform.

So, I have researched what other color picker controls do and decided to write the one myself that I would base on Microsoft AJAX .NET platform. After some considerations I've decided to go even further and build an AJAX Control Toolkit Extender control.

As an example I took an AJAX Control Toolkit Calendar extender and in my Color Picker extender control I also internally used another AJAX Control Toolkit control: Popup extender.

Now, what are the advantages of implementing a client control as an ASP.NET AJAX extender?

  1. You use ASP.NET page mark-up to render the control content to the browser.
  2. No need to manually inject JavaScript, HTML and other resources.
  3. You develop JavaScript code in a standalone file leveraging ASP.NET AJAX framework and Visual Studio intellisense abilities.
  4. JavaScript per se is very well structured, easy to read and debug.
  5. Many of the hassles of JavaScript client coding such as cross-browser compatibility, event handling, asynchronous calls are taken care of by ASP.NET AJAX framework.

So, I have spent a few days coding the control and finally it's out there. I have created a Codeplex project for it so if you are interested just go there and download the control and a Demo Web site.

Now, just a few more words about the extender. First, this is how it looks:

Second, it's extremely easy to use. The extender attaches to an ASP.NET TextBox server control and to an optional button that can open a popup window and an element that samples a selected color in the background. User selects a color by clicking on a colored area. Below is a code example of using an extender on an ASP.NET page.

<asp:TextBox ID="TextBox1" runat="server" 
       Columns="7" MaxLength="7"></asp:TextBox>
  <asp:ImageButton ID="ImageButton1" runat="server" 
       ImageUrl="~/Images/icon_colorpicker.gif" />
  <cdt:ColorPickerExtender ID="cpe" runat="server" 
       TargetControlID="TextBox1"
       SampleControlID="ImageButton1"
       PopupButtonID="ImageButton1" />

Feel free to download the extender from the Codeplex, try it and post any comments or suggestions on the Codeplex project page.

Update 2020

Recently, I've visited the old and now archived CodePlex page for the ColorPickerExtender (https://archive.codeplex.com/?p=cpe) and found out that back in the day Microsoft had included that control on the official ASP.NET site (https://docs.microsoft.com/en-us/aspnet/web-forms/overview/ajax-control-toolkit/colorpicker/using-the-colorpicker-control-extender-cs). What a nice thing! Encouraged by this finding I've decided to resurrect the CPE and port it over to Angular, which is currently my favourite client-side framework. I will be introducing a new project on Git some time at the end of 2020, so stay sharp!

Labels: , ,

8 comments:

  1. lover_buoyDecember 1, 2008 at 5:55 PM

    Hi, I was wondering how to use the OnClientColorSelectionChanged property of the color picker extender. I couldn't find any documentation or posts about it on the web. I have written a custom Javascript function which I want to execute when a color is picked. Something like "changeColor(color)" which will apply the new color to a textbox's background.

    changeColor(color) would look something like this:

    function changeColor(color){
    var txtBox = document.getElementById('ctl00_ContentPlaceHolder1_txtColor');
    txtBox.style.backgroundColor=color;
    }

    Any help will be appreciated.

    Nick

    ReplyDelete
  2. UnknownDecember 17, 2008 at 10:32 AM

    Hi,

    Take a look at my ASP.NET Color Piker.

    ReplyDelete
  3. ATJanuary 15, 2009 at 2:12 PM

    To Viktar:

    I believe I've seen your control. There are few things that I don't like about it:

    1. It does not utilize ASP.NET AJAX Framework and AJAX Control/Extender model.

    2. The client JavaScript does not utilize a JS prototype object model.

    However if you've got ideas and would like to participate in ColorPicker AJAX Extender development please let me know.

    ReplyDelete
  4. ATMarch 11, 2009 at 10:47 AM

    To nikkk:

    The ColorPicker extender exposes a "colorSelectionChanged" client-side event that your code can subscribe to. The event is raised after the color is picked in the popup (the corresponding color cell was clicked on).

    You can subscribe to the event by doing something like this:

    var cpe = $find("ColorPicker1");
    cpe.add_colorSelectionChanged(changeColor);

    function changeColor() {
    $get("<%= Color1.ClientID %>").style.color = cpe.get_selectedColor();
    }

    ReplyDelete
  5. ATMarch 11, 2009 at 2:46 PM

    To nikkk:

    There was a typo in my previous answer. You should write a JavaScript function to handle an event as the following:

    function changeColor(sender) {
    sender.get_element().style.color = '#' + sender.get_selectedColor();
    }

    ReplyDelete
  6. UnknownApril 15, 2009 at 1:17 PM

    Great work,

    However, I was wondering if you could post a dll compiled against .net 2.0 i've tried it and it's giving me a lot of errors.

    thankx

    geoti,

    ReplyDelete
  7. UnknownJuly 26, 2009 at 3:54 AM

    First, Excellent Job

    After post back to the page, Sample control and the target control are losing the selection

    Thanks
    Itzik

    ReplyDelete
  8. UnknownJuly 26, 2009 at 4:30 AM

    I solved my problem from my previous post.
    The controls were losing the data because my target control was set as "ReadOnly"

    ReplyDelete

Subscribe to: Post Comments (Atom)