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

Group-Enabled Binding

RadOrgChart supports Grouping of items. The default (also called "simple") binding gives the ability to bind from self-referenced data. But when groups are required to represent a hierarchy, a single data source wouldn't be a good solution. That is why, we provide special feature called Group-Enabled Binding. This feature enables for binding to 2 data sources:

  • Node data source - to bind all OrgChartNodes (and the actual hierarchical structure)
  • GroupItem data source - to bind all items and add them to the appropriate nodes

In order to use the Group-Enabled Binding, one should declare a GroupEnabledBinding section (either in markup or the code-behind).

In this section, there should be both:

  • NodeBindingSettings
  • GroupItemBindingSettings

Having 2 separate sources for the nodes and the items, gives the benefit of well-formed and normalized sources, without too much repetition of data.

  • DefaultVB.aspx
  • OrgChartGroupItemData.vb
    • OrgChartGroupItemData.vb
    • OrgChartNodeData.vb
<%@ Page 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:RadOrgChart RenderMode="Lightweight" ID="RadOrgChart1" runat="server">
            <GroupEnabledBinding>
                <NodeBindingSettings DataFieldID="ID" DataFieldParentID="ParentID"
                    DataSourceID="NodeObjectDataSource" />
                <GroupItemBindingSettings DataFieldNodeID="NodeID" DataFieldID="ID" DataTextField="Text"
                    DataSourceID="ItemObjectDataSource" />
            </GroupEnabledBinding>
        </telerik:RadOrgChart>
    </div>

    <asp:ObjectDataSource ID="NodeObjectDataSource" runat="server" SelectMethod="GetNodesData"
        TypeName="Telerik.Web.Examples.OrgChartNodeData" />
    <asp:ObjectDataSource ID="ItemObjectDataSource" runat="server" SelectMethod="GetGroupItemsData"
        TypeName="Telerik.Web.Examples.OrgChartGroupItemData" />
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance