Working with AJAX ColorPickerExtender control
Introduction
There is no decent inbuilt color picker in ASP.NET. You may find dozens of pure JavaScript color pickers but none of them are proficient or looks attractive in the ASP.NET page. To ease out the efforts of the coder, developer community has released a very flexible ASP.NET Ajax control that gives you select colors from the color box. Color picker is an ASP.NET Ajax control that let you pick a color from a list of all possible colors displayed in a color palette.
How Ajax Color picker control works?
This control is displayed when you move your focus to attached textbox control. On clicking the textbox, a clients side popup opens up to let you select the color. You have an alternate option of opening the color box on click of a button. This control not only let you pick colors but also shows you the hex code of the selected color. After selecting the color, color palette closes and hex code of the selected color is displayed on the textbox. Pasting the custom color hex code on the textbox will display color equivalent to that hex code even if it is not in a color picker palette
Properties of Ajax Color picker control
TargetControlID - ID of the Target TextBox control
PopupButtonID - ID of a control that should be clicked to display the color-picker popup. If not used, color palette will pop up on clicking TargetControlID control
SampleControlID - ID of a control to display sample selected color. Hovering on the color in the color palettes changes the background color of this sample control. If not set, selected color is not shown anywhere in the screen.
PopupPosition - Used to define the position of the color picker popup relative to Target TextBox control. Possible values are Left, Right TopLeft, TopRight, BottomLeft (default), BottomRight.
SelectedColor - Default color to be selected when the screen loads.
OnClientColorSelectionChanged - JavaScript function called on selecting the color. OnClientColorSelectionChanged client event is fired everytime you select a color. This event let you define your own list of actions on user event of selecting a color.
Demo
Here, I will show both ways of using Ajax color picker. Simplest way of using color picker is defining a textbox and a simple ColorPickerExtender extender with TargetControlID set to textbox.
<asp:TextBox ID="TextBox1" runat="server" Width="170px" />
<cc1:ColorPickerExtender ID="Colorpickerextender1" runat="server" TargetControlID="TextBox1" />
If I run the application, my screen before selecting the color and after selecting the color looks like
Left side is the output on clicking the textbox while right side is the output after selecting the color. Background Color of the textbox is set to the selected color using OnClientColorSelectionChanged event.
Another way of using this extender is by setting other properties of ColorPickerExtender control.
<asp:TextBox ID="TextBox2" runat="server" Width="170px" />
<div style="width:80px;height:80px; float:left" id="div1"> </div>
<asp:Button ID="Button2" runat="server" Text="Choose Color" Width="90px" />
<cc1:ColorPickerExtender ID="ColorPicker1" runat="server" TargetControlID="TextBox2"
SampleControlID="div1" PopupButtonID="Button2" PopupPosition="Right" OnClientColorSelectionChanged="Color_Changed" />
As you see above, I have declared two additional controls, a button and div. My color palette will be displayed on clicking the button instead of textbox and my selected color will be displayed in the div control.
Below is the output of my screen.
As you see above, left is my screen when I click the button and right is the screen when I select color. JavaScript code to set the background of my textbox is
function Color_Changed(sender) {
sender.get_element().style.color = '#000';
sender.get_element().style.backgroundColor = '#'+ sender.get_selectedColor();
sender.get_element().value = "#" + sender.get_selectedColor();
}
Sender is my ColorPickerExtender control. get_element() gets the reference of my target control(textbox) While get_selectedColor() gets the selected color of ColorPickerExtender control
In the above code, I have set the textbox font color to black, Textbox background color to selected color and Textbox value to hex code of selected color.
Hide Textbox Targeted by ColorPickerExtender control
Sometimes, you may need to hide the textbox attached to the ColorPickerExtender control. Doing so is very easy using CSS. Just set the CSS style property display of textbox to none as shown below.
style="display:none"
Conclusion:
In this article, we saw how to use ColorPickerExtender control to pick a color from list of colors shown in a color palette. This is perhaps, the easiest way of implementing user defined coloring functionality in your web page.
Note: Images used on this website
are either a production of Bhaktivedanta Book Trust(https://www.krishna.com), Iskcon
Foundation or were found in google search under "Free to use and share". If any
of the images presented here violates copyright issues or infringes anyone copyright
or are not under "Fair use", then please bring it to our notice. Read
Disclaimer for more.
Share this to your friends. One of your friend is
waiting for your share.
Related Articles
Working with AJAX ColorPickerExtender control
Add, remove or toggle class of HTML control using jquery.
Post Comment