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

Drag-and-drop Simple Binding

RadOrgChart supports drag-and-drop of Nodes and GroupItems. The functionality could be enabled by setting EnableDragAndDrop property to true. In this example the RadOrgChart is in SimpleBinding (no groups are available), so it is possible to drag-and-drop only the Nodes.
Keep in mind:
  • To change the OrgChart hierarchy after drag-and-drop you need to handle NodeDrop and GroupItemDrop events and reorder the control's data source. There is no automatic update on the underlying data source.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="OrgChart.Examples.DragAndDropSimpleBinding.DefaultCS" %>

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

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Simple" />
    <div class="demo-container no-bg">
        <div class="demo-container-inner">
            <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel" LoadingPanelID="RadAjaxLoadingPanel1">
                <asp:HiddenField runat="server" ID="SessionID" />
                <telerik:RadOrgChart RenderMode="Lightweight" ID="RadOrgChart1" runat="server" DataFieldID="EmployeeID" DataFieldParentID="ReportsTo"
                    Skin="Default" DataTextField="FullName" DataImageUrlField="ImageUrl" EnableDragAndDrop="true">
                </telerik:RadOrgChart>
            </telerik:RadAjaxPanel>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance