OrgChart - Transfer Employees

Employees Transfer List
  • employee thumb Yoshi Latimer
  • employee thumb Johan Stromberg
  • employee thumb Matt Smith
  • employee thumb Mario Pontes
  • employee thumb Peter Pontes
  • Management
    • Kevin Buchanan
    • Nancy Davolio
    • Developers
      • Kate Preston
    • QA
      • Robert King
    • Support
      • David Lande
      • Fransis Wilson
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The above application scenario is useful in cases when some employees need to be transferred in other teams or they are new hires. With drag and drop from the list box you can place an employee in a proper team. Also the drag and drop in the RadOrgChart is handled too.

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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" />

    <asp:HiddenField runat="server" ID="SessionID" />

    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadListBox1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadOrgChart1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadOrgChart1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadOrgChart1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Default" />
    <div class="demo-container no-bg">
        <div class="qsf-demo-canvas">

            <div class="new-employees">
                <telerik:RadListBox RenderMode="Lightweight" ID="RadListBox1" runat="server" Width="250px" Height="225px"
                    OnClientDragging="OnClientDragging" EnableDragAndDrop="true" OnClientDropping="OnClientDropping"
                    DataTextField="Name" DataValueField="ImageUrl">
                    <ItemTemplate>
                        <img class="thumb" width="30" height="37" src='<%# DataBinder.Eval(Container, "Value")%>'
                            alt="employee thumb" />
                        <span class="employee-title"><%# DataBinder.Eval(Container, "Text")%></span>
                    </ItemTemplate>
                    <HeaderTemplate>
                        <span>Employees Transfer List</span>
                    </HeaderTemplate>
                </telerik:RadListBox>
            </div>

            <div class="organizedEmployees">
                <telerik:RadOrgChart RenderMode="Lightweight" ID="RadOrgChart1" runat="server" EnableDragAndDrop="true" GroupColumnCount="2">
                    <ItemTemplate>
                        <span class="pseudoImage" style="background-image: url('<%# DataBinder.Eval(Container, "ImageUrl") %>')"></span>
                        <strong><%# DataBinder.Eval(Container, "Text") %></strong>
                        <button type="button" class="rocRemoveItemButton" title="Remove person">Remove</button>
                    </ItemTemplate>
                </telerik:RadOrgChart>
            </div>

        </div>
    </div>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            //<![CDATA[
            Sys.Application.add_load(function () {
                window.orgChart = $find("<%= RadOrgChart1.ClientID %>");
                window.ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                demo.initialize();
            });
            //]]>
        </script>
    </telerik:RadCodeBlock>

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

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?