OrgChart - DrillDown With Breadcrumb

  • MATTER
    • SUBSTANCE
      • HOMOGENEOUS
    • MIXTURES
      • HOMOGENEOUS
      • HETEROGENEOUS
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The demo shows an example of how to combine DrillDown and MaxBindDepth functionalities. DrillDown feature gives the ability to observe a specific branch of the hierarchy with the possiblity to navigate to the parent or root Node, while the MaxBindDepth determines the depth of the data hierarchy to which the control will be bound. The breadcrumb on the left side gives you the possibility to navigate to parent Nodes.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="OrgChart.Examples.ApplicationScenarios.DrillDownWithBreadcrumb.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" />
    <script type="text/javascript" src="scripts.js"></script>
</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" />

    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadLoadingPanel1">
        <div class="demo-container no-bg">

            <div class="rocBreadCrumb"></div>

            <telerik:RadOrgChart RenderMode="Lightweight" ID="RadOrgChart1" runat="server" Skin="Default" EnableDrillDown="true" DisableDefaultImage="true"
                MaxDataBindDepth="3">
            </telerik:RadOrgChart>

        </div>
    </telerik:RadAjaxPanel>
    <telerik:RadScriptBlock runat="server">
        <script type="text/javascript">
            // <![CDATA[
            Sys.Application.add_load(function () {
                window.orgChart = $find("<%= RadOrgChart1.ClientID %>");
                demo.initialize();
            });
            // ]]>
        </script>
    </telerik:RadScriptBlock>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?