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

Client Template


RadTreeMap supports only client templates. The templates are declared in the ClientItemTemplate tag and support the following expressions for evaluating code:
  • #= ... # - Data - Evaluates the JavaScript code expression or a string property from the data item and outputs the result in the template.
  • # ... # - Code - Evaluates the JavaScript code expression inside. Does not output value.
  • #: ... # - HTML-encode - Same as the data expression, but HTML-encodes the result.

To populate the client template with server data you need to set the DataKeyNames property. Therefore the control will get the data from the DataItem of the TreeMapItem and populate the template.

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

<%@ 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" />
    <div class="demo-container">
        <telerik:RadTreeMap RenderMode="Lightweight" runat="server" ID="TreeMap1" DataKeyNames="Rank,ImageUrl" AlgorithmType="Vertical">
            <ClientItemTemplate>
                <div style="font-size:18px;">#=dataItem.Rank #</div><div style="font-weight:bold">#=text#</div>
               #if (dataItem.ImageUrl) {#  <img class="image" src='#=dataItem.ImageUrl#'></img> #} #
            </ClientItemTemplate>
        </telerik:RadTreeMap>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance