RadOrgChart - Telerik ASP.NET OrgChart

  • CEOs
    • John Bravo
    • Nancy Davolio
    • Andrew Fuller
      • Don Marko
        Team Leader
        • Hun-ni Ho
        • Lukas Brezina
        • Viktor Varga
        • Marianna Weissova
      • Sara Darkman
        Team Leader
        • David Maly
        • Lin-Sheng Fen
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Make your organizational chart more interactive by enabling drill down and collapsing features. To observe a particular branch of the hierarchy please click on the “Drill” button when you hover a group.

About RadOrgChart for ASP.NET AJAX

The Telerik ASP.NET AJAX OrgChart control brings a great new visualization to organizational structures and hierarchies. RadOrgChart supports enormous amount of different kinds of dataSources and at the same time it's extremely simple to setup.

RadOrgChart and 90+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Expand/Collapse
  • Templates
  • Drag and Drop
  • Drill Down
  • Webservice binding
  • Advanced Skinning - The visual appearance of the Button control can be easily customized through skins

More about RadOrgChart for ASP.NET AJAX
  • DefaultCS.aspx
<%@ Page Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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" runat="server" ID="RadOrgChart1" 
            EnableCollapsing="true" EnableDrillDown="true" EnableGroupCollapsing="true">
            <Nodes>
                <telerik:OrgChartNode>
                    <RenderedFields>
                        <telerik:OrgChartRenderedField Text="CEOs" />
                    </RenderedFields>
                    <GroupItems>
                        <telerik:OrgChartGroupItem Text="John Bravo" />
                        <telerik:OrgChartGroupItem Text="Nancy Davolio" />
                        <telerik:OrgChartGroupItem Text="Andrew Fuller" />
                    </GroupItems>
                    <Nodes>
                        <telerik:OrgChartNode>
                            <GroupItems>
                                <telerik:OrgChartGroupItem Text="Don Marko">
                                    <RenderedFields>
                                        <telerik:OrgChartRenderedField Text="Team Leader" />
                                    </RenderedFields>
                                </telerik:OrgChartGroupItem>
                            </GroupItems>
                            <Nodes>
                                <telerik:OrgChartNode ColumnCount="2">
                                    <GroupItems>
                                        <telerik:OrgChartGroupItem Text="Hun-ni Ho" />
                                        <telerik:OrgChartGroupItem Text="Lukas Brezina" />
                                        <telerik:OrgChartGroupItem Text="Viktor Varga" />
                                        <telerik:OrgChartGroupItem Text="Marianna Weissova" />
                                    </GroupItems>
                                </telerik:OrgChartNode>
                            </Nodes>
                        </telerik:OrgChartNode>
                        <telerik:OrgChartNode>
                            <GroupItems>
                                <telerik:OrgChartGroupItem Text="Sara Darkman">
                                    <RenderedFields>
                                        <telerik:OrgChartRenderedField Text="Team Leader" />
                                    </RenderedFields>
                                </telerik:OrgChartGroupItem>
                            </GroupItems>
                            <Nodes>
                                <telerik:OrgChartNode ColumnCount="2">
                                    <GroupItems>
                                        <telerik:OrgChartGroupItem Text="David Maly" />
                                        <telerik:OrgChartGroupItem Text="Lin-Sheng Fen" />
                                    </GroupItems>
                                </telerik:OrgChartNode>
                            </Nodes>
                        </telerik:OrgChartNode>
                    </Nodes>
                </telerik:OrgChartNode>
            </Nodes>
        </telerik:RadOrgChart>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?