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

Binding to Telerik ClientDataSource

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

RadTreeView 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 node.
  • DataFieldParentID—defines the data source field name which will be associated with the parent ID of the node.
  • DataText—defines the data source field name which will be shown as a text of the node.
  • DataValue—defines the data source field name which will be considered as a value of the node.

Note: The web service returns more than collection and OnDataRequested event is used to specify which one should be processed by the client data source control.

  • DefaultVB.aspx
<%@ Page Title="" Language="VB"  AutoEventWireup="false" Inherits="Telerik.QuickStart.QsfPage" %>

<%@ 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" />
    <telerik:RadClientDataSource runat="server" ID="RadClientDataSource1">
        <DataSource>
            <WebServiceDataSourceSettings ServiceType="OData" BaseUrl="https://demos.telerik.com/kendo-ui/service/Northwind.svc/">
                <Select Url="Employees/?inlinecount=allpages&%24select=EmployeeID%2CLastName%2CFirstName%2CReportsTo" DataType="JSON" />
            </WebServiceDataSourceSettings>
        </DataSource>
        <ClientEvents />
        <Schema DataName="d.results">
        </Schema>
    </telerik:RadClientDataSource>

    <div class="demo-container size-thin">
         <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="server" PersistLoadOnDemandNodes="false" ClientDataSourceID="RadClientDataSource1" 
             DataTextField="FirstName" DataValueField="LastName" DataFieldID="EmployeeID" 
              DataFieldParentID="ReportsTo" >
        </telerik:RadTreeView>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance