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

Structure Zooming

Use the mouse scroll wheel to zoom in/out.

The above application scenario is useful in cases when the organizational structure is large and the user needs to closely observe a particular item or group of items. The RadOrgChart zooming feature, added through JavaScript, allows the user to zoom the chart so the data is shown in greater detail and is a demonstration of RadOrgChart's Elastic design capabilities. To be able to use zooming with RadOrgChart its RenderMode must be set to Lightweight.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="DefaultCS.aspx.cs" Inherits="OrgChart.Examples.ApplicationScenarios.StructureZooming.RadWindowOrgChartContent" %>

<%@ Register Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>

<!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" />
</head>

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

    <telerik:RadScriptBlock runat="Server" ID="RadScriptBlock2">
        <script type="text/javascript" src="scripts.js"></script>
    </telerik:RadScriptBlock>

    <telerik:MessageBox ID="InformationBox1" runat="server" Type="Info" Icon="Info">
        <p>
            Use the mouse scroll wheel to zoom in/out.
        </p>
    </telerik:MessageBox>

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

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

Support & Learning Resources

Find Assistance