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

Customize a Car

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 car.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • Styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.ColorPicker.AppScenario1.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="CarCustomizer">
            <telerik:RadColorPicker RenderMode="Lightweight" Skin="Black" runat="server" ID="RadColorPicker1" ShowEmptyColor="false"
                OnClientColorChange="TelerikDemo.ChangeImageColor" SelectedColor="#a39580" Columns="6" Width="150"
                Preset="None" CssClass="CarColorPicker">
                <telerik:ColorPickerItem Title="#a39580" Value="#a39580"></telerik:ColorPickerItem>
                <telerik:ColorPickerItem Title="#a9a99c" Value="#a9a99c"></telerik:ColorPickerItem>
                <telerik:ColorPickerItem Title="#bbbbbb" Value="#bbbbbb"></telerik:ColorPickerItem>
                <telerik:ColorPickerItem Title="#95cd36" Value="#95cd36"></telerik:ColorPickerItem>
                <telerik:ColorPickerItem Title="#6189be" Value="#6189be"></telerik:ColorPickerItem>
                <telerik:ColorPickerItem Title="#acbccc" Value="#acbccc"></telerik:ColorPickerItem>
            </telerik:RadColorPicker>
            <img src="images/a39580.jpg" id="imagePreview" class="CarPreview" alt="Car preview" />
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance