TreeMap - Client Template

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

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <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">
                <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> #} #

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?