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

Algorithm Types

  • Demo Configurator


The example demonstrates the supported data visualizations of RadTreeMap that can be specified through the AlgorithmType property. You can choose one of the available options to change the control’s rendering to:

  • Horizontal - the TreeMapItems will be displayed side by side, having the same height as their parent Item.
  • Squarified - the area bellow the parent TreeMapItem is subdivided into square rectangles, which size represents their ratio.
  • Vertical - the TreeMapItems are displayed one below the other, having the same width as their parent Item.

You may also find useful the following article: Algorithm Types.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="TreeMap.Functionality.Algo.DefaultVB"Language="vb"  %>

<%@ 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>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="TreeMap1" />
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container no-bg">
        <telerik:RadTreeMap RenderMode="Lightweight" runat="server" ID="TreeMap1" AlgorithmType="Squarified">
        </telerik:RadTreeMap>
    </div>
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow">

                    <qsf:RadioButtonList ID="RadioButton1" runat="server" AutoPostBack="true" OnTextChanged="RadioButton1_TextChanged" RepeatLayout="UnorderedList">
                        <asp:ListItem Selected="True" Text="Squarified" Value="squarified"></asp:ListItem>
                        <asp:ListItem Text="Vertical" Value="vertical"></asp:ListItem>
                        <asp:ListItem Text="Horizontal" Value="horizontal"></asp:ListItem>
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance