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

WebForms TreeMap Overview


About RadTreeMap for ASP.NET AJAX

The main advantages of the control are that you could:

  • visualize huge data in a meaningful and colorized way (i.e. the hard drive folders and files structure divided by size; the popularity of different mobile devices on the market, and other)
  • optimize space on your web page by its compact structure

RadTreeMap and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Semantic rendering for minimal HTML markup
  • Powerful databinding
  • Rich client-side API
  • Search Engine Friendly
  • Extensive design-time support
  • Skinned Appearance
  • Template Support
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TreeMap.Overview.DefaultCS"Language="c#"  %>

<!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" />
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
        <telerik:RadToolTipManager RenderMode="Lightweight" runat="server" ID="TTM1" ShowEvent="FromCode" EnableShadow="false" Height="258px" Width="350px" HideEvent="LeaveTargetAndToolTip"
            RelativeTo="Element" Position="TopCenter"  EnableRoundedCorners="false" ShowCallout="true" Style="z-index: 100000">
            <WebServiceSettings Path="defaultcs.aspx" Method="ToolTipInfo"></WebServiceSettings>
        </telerik:RadToolTipManager>
        <br />
        <telerik:RadTreeMap RenderMode="Lightweight" runat="server" ID="TreeMap1" OnClientItemCreated="onClientItemCreated" DataKeyNames="Rank" AlgorithmType="Squarified">
            <ClientItemTemplate><div class="boldText">#=dataItem.Rank #</div><div>#=text#</div></ClientItemTemplate>
        </telerik:RadTreeMap>
    </div>
    <script type="text/javascript">
        Sys.Application.add_load(function () {
            window.tooltipManager = $find("<%=TTM1.ClientID%>");
            demo.initialize();
        });
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance