Org Chart

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadOrgChart - Telerik's 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

tlrk.it/13hDPYG To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/13hDPYG

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 80+ 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.

About This Demo

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.


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

Resources

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="c#"  %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/OrgChart/Examples/Overview/Info.ascx" TagName="Info" TagPrefix="qsf" %>

<!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>
    <title>ASP.NET organization chart demo | RadOrgChart Examples</title>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />

     <div class="qsf-demo-canvas">
          <telerik:RadOrgChart 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>
     <div class="qsf-overview-qr">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/OrgChart.png" AlternateText="tlrk.it/13hDPYG" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/13hDPYG">tlrk.it/13hDPYG</a>
    </div>

    </form>
</body>
</html>