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

Using RadOrgChart with RadToolTip

Corporate Directory

This example illustrates the usage of RadOrgChart and RadToolTip control. To view detailed information about each employee hover them with the mouse.
  • DefaultCS.aspx
  • OrgChartEmployeeDetails.ascx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • OrgChartEmployeeDetails.ascx.cs
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="OrgChart.Examples.ApplicationScenarios.IntegrationWithRadToolTip.DefaultCS" %>

<%@ Register Src="~/OrgChart/Examples/ApplicationScenarios/IntegrationWithRadToolTip/OrgChartEmployeeDetails.ascx"
    TagPrefix="uc" TagName="employeedetails" %>
<%@ 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" />
</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 size-wide no-bg">
        <div class="qsf-demo-canvas">
            <h2>
                <span>Corporate Directory</span>
            </h2>

            <telerik:RadOrgChart RenderMode="Lightweight" ID="RadOrgChart1" runat="server" Skin="Default" DataSourceID="SqlDataSource1" EnableDrillDown="true"
                DataFieldID="EmployeeID" DataFieldParentID="ReportsTo">
                <ItemTemplate>
                    <asp:Panel runat="server" ID="Panel1" CssClass="TemplateHolder">
                        <span class="rocCustomImageWrap">
                            <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" ImageUrl='<%# Eval("ImageUrl")%>'
                                AlternateText='<%# Eval("ImageUrl")%>' />
                        </span>
                        <div class="rocCustomTextWrap">
                            <span>
                                <%# Eval("FirstName")%>
                            </span>
                            <br />
                            <span>
                                <%# Eval("LastName")%>
                            </span>
                        </div>
                    </asp:Panel>
                </ItemTemplate>
            </telerik:RadOrgChart>
        </div>

    </div>
    <telerik:RadToolTipManager RenderMode="Lightweight" runat="server" ID="RadToolTipManager1" Skin="Default" OnAjaxUpdate="OnAjaxUpdate"
        Position="BottomRight" OffsetX="16" OffsetY="16" EnableShadow="false" Width="195" Height="135" />

    <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        SelectCommand="SELECT N.EmployeeID, N.ReportsTo, N.FirstName, N.LastName, E.ImageUrl From Employees as E, Employees_Northwind as N Where N.EmployeeID < '10' AND N.EmployeeID = E.ID"></asp:SqlDataSource>

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

Support & Learning Resources

Find Assistance