OrgChart - Drill Down

  • Computer System
    • Hardware
      • Motherboard
      • Storage
      • Input/Output Devices
    • Software
      • System
      • Applications
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadOrgChart's Drill Down functionality is very useful when displaying a lot of information. It provides the possibility to drill down on nodes which can be a way to save space in the user-interface while still providing the user with all the needed information.
While observing a specific branch of the RadOrgChart's hierarchy the user is also given the ability to drill up to the parent/root node.

It is enabled by setting the EnbaleDrillDown property to true.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="OrgChart.Examples.DrillDown.DefaultCS" %>
<%@ 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>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadLoadingPanel1" Skin="Telerik" />

    <div class="demo-container no-bg">
        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadLoadingPanel1">
            <telerik:RadOrgChart RenderMode="Lightweight" ID="RadOrgChart1" runat="server" EnableDrillDown="true" Skin="Default" />
        </telerik:RadAjaxPanel>
    </div>

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

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?