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

DrillDown With Breadcrumb

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>
<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