How to Open Ajax ColorPicker on Button Click event in Asp.Net

Description:-

In this Article we will Use Ajax Color Picker Control on Button Click event. Here we will Open Color Picker on Button Click event and Preview Color in Other Tag and Display Color Code in Text Control by Selecting Color from Color Picker Control.

Default.aspx:-

<div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:TextBox ID="TextBox1" runat="server" Width="170px" />
        <br /><br />
        <div id="preview" style="width: 54px; height: 35px; border: 1px solid #000; margin: 0 3px; float: left">
        </div>
        <asp:Button ID="Button1" runat="server" Text="Choose Color" Width="96px"
            Height="34px" />
        <cc1:ColorPickerExtender ID="ColorPicker1" runat="server" TargetControlID="TextBox1"
            SampleControlID="preview" PopupButtonID="Button1" PopupPosition="Right" OnClientColorSelectionChanged="Color_Changed" />
</div>

Here you can see I have assigned TargetControlId to Textbox Control and to Open Color Picker Control I have Set PopUpButtonId to Button1 Control and for Preview Color I have use Div tag to Preview Color in this Area.

for Selecting Color and Display Color code in Textbox Control I have Use Script.

Script:-

<script type="text/javascript">
        function Color_Changed(sender) {
            sender.get_element().value = "#" + sender.get_selectedColor();
        }
</script>

Now runs your Application and Click on button to Open Color Picker and Select Color.

Author : Umesh Patel

Related Posts