TreeMap - Declarative DataSources

object data source

sql data source

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

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 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>
    <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

Help Us Improve

Was this example helpful?