TreeMap - Algorithm Types

Demo Configurator



Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TreeMap.Functionality.Algo.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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

Help Us Improve

Was this example helpful?