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

Colors

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