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

Declarative DataSources

object data source

sql data source

RadTreeMap supports server-side binding to a data source control by setting the DataSourceID property. You can bind the TreeMap to various data source controls such as SqlDataSource, ObjectDataSource, XmlDataSource, etc.

Additionally, you should set DataTextField, DataValueField, DataFieldID, DataFieldParentID properties of RadTreeMap in order to match the desirable fields from the database table.

You may also find useful the following article: Server-side Data Binding.

  • DefaultCS.aspx
  • styles.css
<%@ Page AutoEventWireup="true" 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 no-bg">
        <div class="treeMapWrapper first">
            <p>object data source</p>
            <telerik:RadTreeMap RenderMode="Lightweight" runat="server" ID="TreeMap1" DataFieldID="ID" Width="500px" Height="550px" DataFieldParentID="ParentID" DataTextField="Text" DataValueField="Value"
                DataSourceID="ObjectDataSource1">
            </telerik:RadTreeMap>

            <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetTreeMapData"
                TypeName="Telerik.Web.Examples.TreeMapDataItem"></asp:ObjectDataSource>
        </div>

        <div class="treeMapWrapper">
            <p>sql data source</p>
            <telerik:RadTreeMap RenderMode="Lightweight" runat="server" ID="RadTreeMap1" Width="500px" Height="550px" DataSourceID="SqlDataSource1" DataFieldID="ID" DataFieldParentID="ParentID" DataValueField="Value" DataTextField="Name">
            </telerik:RadTreeMap>
            <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>" SelectCommand="SELECT * FROM [PayRates]"></asp:SqlDataSource>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance