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

GroupItems Overlap

The demo shows how to save space from the user-interface by overlapping the nodes from a specific category.
The user is given the possibility to review the information related to a specific node just by hovering over it. The hovered node is shown on top of all the other nodes from the category.

Note
The demo is not supported under IE10, IE7 and IE6 browsers because "z-index" style is not supported properly on relatively positioned elements.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="OrgChart.Examples.Appearance.Overlap.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" />
    <div class="demo-container no-bg">
        <div class="qsf-demo-canvas">
            <telerik:RadOrgChart RenderMode="Lightweight" ID="RadOrgChart1" runat="server" Skin="Telerik">
            </telerik:RadOrgChart>
        </div>
    </div>
    <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