OrgChart - GroupItems Overlap

  • Telerik
    • UI for ASP.NET AJAX
    • Data management
      • DataPager
      • Filter
      • Grid
      • ListBox
      • ListView
      • TreeList
    • Editors
      • ColorPicker
      • ComboBox
      • Input
      • Calendar
      • Editor
      • ImageEditor
    • Navigation
      • Button
      • Menu
      • PanelBar
      • RibbonBar
      • SiteMap
      • TabStrip
      • ToolBar
      • TreeView
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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.

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<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>

    <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:RadScriptBlock runat="server">
        <script type="text/javascript">
            // <![CDATA[
            Sys.Application.add_load(function () {
                window.orgChart = $find("<%= RadOrgChart1.ClientID %>");
            // ]]>


Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?