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

OData binding

TreeView bound to self-referencing data

TreeView bound to 2 related data tables

This example demonstrates how to populate RadTreeView from OData enbaled service via RadODataDataSource. The demo shows two types of binding: to self-referencing data and related data contained in different objects. The first treeview is bound to a single data model which has self-reference hierarchy structure. The second treeview rely on a data from two different data models with different end points.
Expand a node to populate its children on demand via OData enabled web service.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#"  CodeFile="DefaultCS.aspx.cs" Inherits="TreeView.Examples.LoadOnDemand.OData.DefaultCS" %>

<%@ 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 href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadODataDataSource runat="server" ID="RadODataDataSource1">
        <Schema>
            <telerik:DataModel ModelID="Employee" Set="Employees">
                <telerik:DataModelField FieldName="EmployeeID" />
                <telerik:DataModelField FieldName="LastName" />
                <telerik:DataModelField FieldName="FirstName" />
                <telerik:DataModelField FieldName="ReportsTo" />
            </telerik:DataModel>
        </Schema>
    </telerik:RadODataDataSource>
    <telerik:RadODataDataSource runat="server" ID="RadODataDataSource2">
        <Schema>
            <telerik:DataModel ModelID="Category" Set="Categories">
                <telerik:DataModelField FieldName="CategoryID" />
                <telerik:DataModelField FieldName="CategoryName" />
            </telerik:DataModel>
            <telerik:DataModel ModelID="Product" Set="Products">
                <telerik:DataModelField FieldName="ProductName" />
                <telerik:DataModelField FieldName="ProductID" />
                <telerik:DataModelField FieldName="CategoryID" />
            </telerik:DataModel>
        </Schema>
    </telerik:RadODataDataSource>
    <div class="demo-containers">
        <div class="demo-container size-thin">
            <h2>TreeView bound to self-referencing data</h2>
            <telerik:RadTreeView RenderMode="Lightweight" runat="server" ID="RadTreeView1" Height="350px" Width="300" ODataDataSourceID="RadODataDataSource1"
                DataModelID="Employee" DataFieldID="EmployeeID" DataFieldParentID="ReportsTo"
                DataTextField="FirstName" DataValueField="LastName" PersistLoadOnDemandNodes="false">
                <ClientNodeTemplate>#= Text # #= Value #</ClientNodeTemplate>
            </telerik:RadTreeView>
        </div>
        <div class="demo-container size-thin">
            <h2>TreeView bound to 2 related data tables</h2>
            <telerik:RadTreeView RenderMode="Lightweight" runat="server" ID="RadTreeView2" Height="350px" Width="300" ODataDataSourceID="RadODataDataSource2" PersistLoadOnDemandNodes="false">
                <DataBindings>
                    <telerik:RadTreeNodeBinding ModelID="Category" TextField="CategoryName" ValueField="CategoryID"
                        Depth="0" FieldID="CategoryID" />
                    <telerik:RadTreeNodeBinding ModelID="Product" TextField="ProductName" ValueField="ProductID"
                        Depth="1" FieldParentID="CategoryID" />
                </DataBindings>
            </telerik:RadTreeView>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance