New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Product Configurator

Shirt preview
Select Color
Light Blue

This is a sample application scenario which shows how to use RadColorPicker to implement color customization on a particular product. You can select a different color to change the preview of the shirt.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • Styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.ColorPicker.AppScenario3.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
        <div class="ShirtChooser">
            <img id="ImagePreview" src="images/A9BAD4.jpg" alt="Shirt preview" class="ImagePreview" />
            <div class="ColorInformation">
                <div class="ColorInformationTitle">
                    Select Color
                </div>
                <div id="selectedColor" class="SelectedColor" style="background-color: #A9BAD4;">
                </div>
                <span id="colorName">Light Blue</span>
                <br class="qsf-clear-float" />
                <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ID="RadColorPicker1" ShowEmptyColor="false"
                    PreviewColor="false" OnClientColorChange="TelerikDemo.ChangeImageColor" SelectedColor="#A9BAD4"
                    Columns="5" Width="105px" Preset="None" Skin="Black" CssClass="ShirtColorPicker">
                    <telerik:ColorPickerItem Title="Light Blue" Value="#A9BAD4"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Stone Blue" Value="#A1A4B3"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Sand" Value="#A49381"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Charcoal" Value="#626878"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Navy Blue" Value="#2E436E"></telerik:ColorPickerItem>
                </telerik:RadColorPicker>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance