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


The following article demonstrates the usage of the Colors property of the RadTreeMap.

The Colors property of the RadTreeMap is a collection of type System.Drawing.Color, which provides the ability to set custom colors. The list of colors will be applied on each group of TreeMapItems. If the amount of predefined colors, exceeds the number of items, the coloration stars from the first color all over again.

In the example bellow, you could examine how several colors are assigned to the Colors collection of the RadTreeMap and in the Figure 1, you could observe how the control is visualized:

<telerik:RadTreeMap RenderMode="Lightweight" runat="server" ID="TreeMap1"  Height="250" Width="400" AlgorithmType="Horizontal">
        <telerik:TreeMapItem Text="Parent Item">
                <telerik:TreeMapItem Text="Item 1" Value="6">
                        <telerik:TreeMapItem Text="Sub Item 1.1" Value="2"></telerik:TreeMapItem>
                        <telerik:TreeMapItem Text="Sub Item 1.2" Value="2"></telerik:TreeMapItem>
                        <telerik:TreeMapItem Text="Sub Item 1.3" Value="1"></telerik:TreeMapItem>
                <telerik:TreeMapItem Text="Item 2" Value="4">
                        <telerik:TreeMapItem Text="Sub Item 2.1" Value="5"></telerik:TreeMapItem>
                        <telerik:TreeMapItem Text="Sub Item 2.2" Value="5"></telerik:TreeMapItem>
                        <telerik:TreeMapItem Text="Sub Item 2.3" Value="3"></telerik:TreeMapItem>
                        <telerik:TreeMapItem Text="Sub Item 2.5" Value="2"></telerik:TreeMapItem>
                <telerik:TreeMapItem Text="Item 3" Value="3">
                        <telerik:TreeMapItem Text="Sub Item 3.1" Value="2"></telerik:TreeMapItem>
                        <telerik:TreeMapItem Text="Sub Item 3.2" Value="2"></telerik:TreeMapItem>
                        <telerik:TreeMapItem Text="Sub Item 3.4" Value="1"></telerik:TreeMapItem>
protected void Page_Load(object sender, EventArgs e)

    // Another way to populate the Colors collection
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load


    ' Another way to populate the Colors collection
End Sub

Figure 1: Demonstrates how the RadTreeMap is visualized, when custom colors are set.functionality-colors

Note : The sub-items count of Item 2 exceeds the amount of predefined colors. Therefore, Sub Item 2.5 has the same color as Sub Item 2.1.

In this article