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

    Colors

    TOP 20 Highest-Paid Athletes
    Soccer
    Cristiano Ronaldo
    Lionel Messi
    Zlatan Ibrahimovic
    Gareth Bale
    Radamel Falcao
    Neymar
    Basketball
    LeBron James
    Kobe Bryant
    Derrick Rose
    Kevin Durant
    Boxing
    Floyd Mayweather
    Manny Pacquiao
    Tennis
    Roger Federer
    Rafael Nadal
    Novak Djokovic
    Golf
    Phil Mickelson
    Tiger Woods
    Football
    Matt Ryan
    Matthew Stafford
    Racing
    Lewis Hamilton
    Selected colors

    This example demonstrates how to predefine the colors used by the RadTreeMap through the server-side Colors collection property. By choosing 6 or less colors from the color picker and bind the control, you will customize the appearance of the control on the page.

    You may also find useful the following article: Colors.

    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    • styles.css
    <%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TreeMap.Functionality.Colors.DefaultCS"Language="c#"  %>
     
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ 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 rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <telerik:RadAjaxPanel runat="server">
            <div class="demo-container no-bg">
                <telerik:RadTreeMap RenderMode="Lightweight" runat="server" ID="TreeMap1" Width="1000px" Skin="Silk" AlgorithmType="Squarified">
                </telerik:RadTreeMap>
                <div class="colorSettings">
                    <telerik:RadColorPicker RenderMode="Lightweight" ID="RadColorPicker1" runat="server" Preset="Metro" Skin="Silk" ShowEmptyColor="false" EnableCustomColor="false" OnClientColorChange="onClientColorChange">
                    </telerik:RadColorPicker>
                    <div class="listBoxHeader">Selected colors</div>
                    <telerik:RadListBox RenderMode="Lightweight" runat="server" Skin="Silk" ID="RadListBox1" Height="26px" Width="158px" ButtonSettings-AreaWidth="25px" AllowDelete="true">
                        <ClientItemTemplate>
                        <div  class="selectedColor" style="background-color:#=Text#;"></div>
                        </ClientItemTemplate>
                        <ItemTemplate>
                            <div style="background-color: <%# DataBinder.Eval(Container, "Text")%>; height: 14px; width: 14px"></div>
                        </ItemTemplate>
                    </telerik:RadListBox>
                    <telerik:RadButton RenderMode="Lightweight" runat="server" Text="Bind the control"></telerik:RadButton>
                </div>
            </div>
            <telerik:RadCodeBlock runat="server">
                <script type="text/javascript">
                    function onClientColorChange(sender, args) {
                        var item = new Telerik.Web.UI.RadListBoxItem(),
                            listBox = $find("<%=RadListBox1.ClientID%>"),
                            color = sender.get_selectedColor();
     
                        if (color) {
                            if (listBox.get_items().get_count() !== 6) {
                                item.set_text(color);
                                listBox.trackChanges();
                                listBox.get_items().add(item);
                                listBox.commitChanges();
                                item.bindTemplate();
     
                                if (color == "#FFFFFF") {
                                    $(item.get_element().children).css("border-color", "#ddd");
                                }
                            }
                            else {
                                alert("You could choose only 6 colors!");
                            }
                        }
                    }
                </script>
            </telerik:RadCodeBlock>
        </telerik:RadAjaxPanel>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance