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

Programatic Data Binding

DataSet

IEnumerable

RadOrgChart fully supports binding to a wide range of data sources:

  • DataSet, DataTable, DataView
  • ASP 2.0 DataSource types including
    • Table-based DataSource components
    • ObjectDataSource
  • Any object that implements the IEnumerable interface

Data binding supports binding from a a single self-referencing table with ID -> ParentID relation.

Below properties and methods are related to data binding:

DataSource - Set to an instance of your data source. This is mandatory when binding the RadOrgChart at runtime
DataSourceID - Set to the ID of your data source. This is mandatory when binding the RadOrgChart declaratively
DataFieldID - This is the field name from the data source used to uniquely identify each row. This field is required when binding to hierarchical data
DataFieldParentID - This is the field name from the data source used to identify the row for the parent node. This field is required.
DataTextField - This is the field name from the data source that populates each item's Text property during binding
DataImageUrlField - This is the field name from the data source that populates each item's ImageUrl property during binding
DataImageAltTextField - This is the field name from the data source that populates each item's ImageAltText property during binding
DataBind - Call this method after you have set the aforementioned properties when binding at runtime. This method is mandatory for binding at runtime

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="OrgChart.Examples.PopulatingWithData.ProgramaticDataBinding.DefaultCS"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>
</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 size-wide">
        <h3>DataSet</h3>
        <telerik:RadOrgChart RenderMode="Lightweight" runat="server" ID="RadOrgChart1">
        </telerik:RadOrgChart>
    </div>
    <div class="demo-container no-bg size-wide">
        <h3>IEnumerable</h3>
        <telerik:RadOrgChart RenderMode="Lightweight" runat="server" ID="RadOrgChart2">
        </telerik:RadOrgChart>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance