<%@ 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>