ASP.NET Color Picker - Without TargetId





Change my parent's background color
Color Picker





This example demonstrates Color Picker use without TargetId property.
Also here you can see how to redefine some default style classes.

Example code

<%@ Register TagPrefix="obout" Namespace="OboutInc.ColorPicker" Assembly="obout_ColorPicker" %>
...
<script type="text/JavaScript">
function OnColorOpen(sender){
  var parent =sender.getPickerElement().parentNode;
  sender.setColor(OboutInc.ColorPicker.getStyle(parent,"background-color"));
}
function OnColorPicked(sender){
  var parent =sender.getPickerElement().parentNode;
  parent.style.backgroundColor= sender.getColor();
}
</script>
<style type="text/css">
  /* Redefine some default CSS rules */
  span.ColorPicker_Caller {border-width:1px; border-style:solid; border-color:#D0D0F8background-color:#FFFFFF;}
  span.ColorPicker_Caller:hover {border-color:#0000FF; background-color:#F0F0F8;}
  span.ColorPicker_Title {color: #0000FF;}
  table.ColorPicker_ColorsTable {background-color: #b8beca; border-color: #b8beca;}
  img.ColorPicker_Pallete {border-color: #b8beca;}
  div.ColorPicker_ColorPalleteContainer {border-width: 0px;}
  div.ColorPicker_GrayPalleteContainer {border-width: 0px;}
</
style>
...
<obout:ColorPicker runat="server" OnClientOpen="OnColorOpen" OnClientPicked="OnColorPicked" >
      Change my parent's background color
</obout:ColorPicker>

See the full source code in /ColorPicker/aspnet_withoutTargetId.aspx file of downloaded Suite.