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

Binding to Telerik ClientDataSource

RadTreeMap can be bound to RadClientDataSource control. This functionality is provided out of the box through the server-side ClientDataSourceID property.

The control needs the following properties in order to load its items properly:

  • DataFieldID—defines the data source field name which will be associated with the unique identifier of the item.
  • DataFieldParentID—defines the data source field name which will be associated with the parent ID of the item.
  • DataText—defines the data source field name which will be shown as a text of the item.
  • DataValue—defines the data source field name which will be considered as a value of the item.
  • DataColor—defines the data source field name which will be considered as a color of the item.
  • DefaultVB.aspx
<%@ Page AutoEventWireup="false" Language="vb"  %>

<%@ 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>
</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:RadTreeMap RenderMode="Lightweight" runat="server" ID="TreeMap1" ClientDataSourceID="RadClientDataSource1"
            DataFieldID="ID" DataFieldParentID="ParentID" DataTextField="Text" DataValueField="Value">
        </telerik:RadTreeMap>
        <telerik:RadClientDataSource runat="server" ClientEvents-OnCommand="loadDataManually" ID="RadClientDataSource1"></telerik:RadClientDataSource>
    </div>

    <script type="text/javascript">
        function loadDataManually(sender, args) {

            if (args.get_commandName() == "fetch") {

                cdRawData = [{ ID: 1, ParentID: null, Text: "TOP 20 Highest-Paid Athletes", Value: "1" },
                             { ID: 2, ParentID: 1, Text: "Soccer", Value: "290.5" },
                             { ID: 3, ParentID: 2, Text: "Cristiano Ronaldo", Value: "80" },
                             { ID: 4, ParentID: 2, Text: "Lionel Messi", Value: "64.7" },
                             { ID: 5, ParentID: 2, Text: "Zlatan Ibrahimovic", Value: "40.4" },
                             { ID: 6, ParentID: 2, Text: "Gareth Bale", Value: "36.4" },
                             { ID: 7, ParentID: 2, Text: "Radamel Falcao", Value: "35.4" },
                             { ID: 8, ParentID: 2, Text: "Neymar", Value: "33.6" },
                             { ID: 9, ParentID: 1, Text: "Basketball", Value: "202.3" },
                             { ID: 10, ParentID: 9, Text: "LeBron James", Value: "72.3" },
                             { ID: 11, ParentID: 9, Text: "Kobe Bryant", Value: "61.5" },
                             { ID: 12, ParentID: 9, Text: "Derrick Rose", Value: "36.6" },
                             { ID: 13, ParentID: 9, Text: "Kevin Durant", Value: "31.9" },
                             
                             { ID: 14, ParentID: 1, Text: "Tennis", Value: "133.8" },
                             { ID: 15, ParentID: 14, Text: "Roger Federer", Value: "56.2" },
                             { ID: 16, ParentID: 14, Text: "Rafael Nadal", Value: "44.5" },
                             { ID: 17, ParentID: 14, Text: "Novak Djokovic", Value: "33.1" },
                             
                             { ID: 18, ParentID: 1, Text: "Boxing", Value: "146.8" },
                             { ID: 19, ParentID: 18, Text: "Floyd Mayweather", Value: "105" },
                             { ID: 20, ParentID: 18, Text: "Manny Pacquiao", Value: "41.8" },
                             
                             { ID: 21, ParentID: 1, Text: "Football", Value: "76.8" },
                             { ID: 22, ParentID: 21, Text: "Matt Ryan", Value: "43.8" },
                             { ID: 23, ParentID: 21, Text: "Matthew Stafford", Value: "33" },
                             
                             { ID: 24, ParentID: 1, Text: "Golf", Value: "84.4" },
                             { ID: 25, ParentID: 24, Text: "Tiger Woods", Value: "31.2" },
                             { ID: 26, ParentID: 24, Text: "Phil Mickelson", Value: "53.2" },
                             
                             { ID: 27, ParentID: 1, Text: "Racing", Value: "32" },
                             { ID: 28, ParentID: 27, Text: "Lewis Hamilton", Value: "32" }];


                sender.set_data(cdRawData);
            }
        }
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance