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

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

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.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • styles.css
<%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" AutoEventWireup="true" Inherits="OrgChart.Examples.ApplicationScenarios.TransferEmployees.DefaultVB" %>

<%@ 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" />

    <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