Drag and Drop
RadOrgChart control supports drag-and-drop of Nodes and GroupItems. By setting EnableDragAndDrop propety to true the drag-and-drop functionality is enabled. NodeDrop and GroupItemDrop events are exposed. When a node is dropped the NodeDrop event is fired, when a GroupItem is dropped the GroupItemDrop event is fired. To change the OrgChart hierarchy you need to handle the events and update the underlying data sources. No automatic updates are available.
Binding scenarios:
Using SimpleBinding the user can only drag-and-drop Nodes which enables him to change the hierarchy.
<telerik:RadOrgChart RenderMode="Lightweight" runat="server" ID="RadOrgChart1" EnableDragAndDrop="true">
</telerik:RadOrgChart>
<asp:SqlDataSource runat="server" ID="DataSource1"
ConnectionString="<%$ ConnectionStrings:EmployeeConnectionString %>"
SelectCommand="SELECT * FROM [Names]" />
protected void Page_Load(object sender, EventArgs e)
{
RadOrgChart1.NodeDrop += new OrgChartNodeDropEventHandler(RadOrgChart1_NodeDropped);
RadOrgChart1.DataFieldID = "ID";
RadOrgChart1.DataFieldParentID = "ParentID";
RadOrgChart1.DataTextField = "Text";
RadOrgChart1.DataSource = DataSource1;
RadOrgChart1.DataBind();
}
void RadOrgChart1_NodeDropped(object sender, OrgChartNodeDropEventArguments e)
{
DataSource1.UpdateCommand = "Update Names Set ParentID='" + e.DestinationNode.ID + "' Where ID='" + e.SourceNode.ID + "'";
DataSource1.Update();
RadOrgChart1.DataBind();
}
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
RadOrgChart1.DataFieldID = "ID"
RadOrgChart1.DataFieldParentID = "ParentID"
RadOrgChart1.DataTextField = "Text"
RadOrgChart1.DataSource = DataSource1
RadOrgChart1.DataBind()
End Sub
Private Sub RadOrgChart1_NodeDropped(sender As Object, e As OrgChartNodeDropEventArguments) Handles RadOrgChart1.NodeDrop
DataSource1.UpdateCommand = "Update Names Set ParentID='" & Convert.ToString(e.DestinationNode.ID) & "' Where ID='" & Convert.ToString(e.SourceNode.ID) & "'"
DataSource1.Update()
RadOrgChart1.DataBind()
End Sub
Using GroupEnabledBinding one can drag-and-drop both Nodes and GroupItems. This allows the user to reorder the hierarchy and to move a GroupItem from one Node to another. By doing so (moving GroupItems), it is possible to have empty nodes. Now, the empty Nodes are rendered (except in SimpleBinding). However, using the AllowGroupItemDragging property and setting it to false one can prevent dragging off the GroupItems from a Node.
<telerik:RadOrgChart RenderMode="Lightweight" runat="server" ID="RadOrgChart3" EnableDragAndDrop="true">
</telerik:RadOrgChart>
<asp:SqlDataSource runat="server" ID="SqlDataSource1"
ConnectionString="<%$ ConnectionStrings:EmployeeConnectionString %>"
SelectCommand="SELECT * FROM [Nodes]" />
<asp:SqlDataSource runat="server" ID="SqlDataSource2"
ConnectionString="<%$ ConnectionStrings:EmployeeConnectionString %>"
SelectCommand="SELECT * FROM [GroupItems]" />
protected void Page_Load(object sender, EventArgs e)
{
RadOrgChart3.NodeDrop += new OrgChartNodeDropEventHandler(RadOrgChart3_NodeDropped);
RadOrgChart3.GroupItemDrop += new OrgChartGroupItemDropEventHandler(RadOrgChart3_GroupItemDropped);
RadOrgChart3.GroupEnabledBinding.NodeBindingSettings.DataSource = SqlDataSource1;
RadOrgChart3.GroupEnabledBinding.NodeBindingSettings.DataFieldID = "ID";
RadOrgChart3.GroupEnabledBinding.NodeBindingSettings.DataFieldParentID = "ParentID";
RadOrgChart3.GroupEnabledBinding.GroupItemBindingSettings.DataSource = SqlDataSource2;
RadOrgChart3.GroupEnabledBinding.GroupItemBindingSettings.DataFieldID = "ID";
RadOrgChart3.GroupEnabledBinding.GroupItemBindingSettings.DataFieldNodeID = "NodeID";
RadOrgChart3.GroupEnabledBinding.GroupItemBindingSettings.DataTextField = "Text";
RadOrgChart3.DataBind();
}
void RadOrgChart3_GroupItemDropped(object sender, OrgChartGroupItemDropEventArguments e)
{
SqlDataSource2.UpdateCommand = "Update GroupItems Set NodeID='" + e.DestinationNode.ID + "' Where ID='" + e.SourceGroupItem.ID + "'";
SqlDataSource2.Update();
RadOrgChart3.DataBind();
}
void RadOrgChart3_NodeDropped(object sender, OrgChartNodeDropEventArguments e)
{
SqlDataSource1.UpdateCommand = "Update Nodes Set ParentID='" + e.DestinationNode.ID + "' Where ID='" + e.SourceNode.ID + "'";
SqlDataSource1.Update();
RadOrgChart3.DataBind();
}
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
RadOrgChart3.GroupEnabledBinding.NodeBindingSettings.DataSource = SqlDataSource1
RadOrgChart3.GroupEnabledBinding.NodeBindingSettings.DataFieldID = "ID"
RadOrgChart3.GroupEnabledBinding.NodeBindingSettings.DataFieldParentID = "ParentID"
RadOrgChart3.GroupEnabledBinding.GroupItemBindingSettings.DataSource = SqlDataSource2
RadOrgChart3.GroupEnabledBinding.GroupItemBindingSettings.DataFieldID = "ID"
RadOrgChart3.GroupEnabledBinding.GroupItemBindingSettings.DataFieldNodeID = "NodeID"
RadOrgChart3.GroupEnabledBinding.GroupItemBindingSettings.DataTextField = "Text"
RadOrgChart3.DataBind()
End Sub
Private Sub RadOrgChart3_GroupItemDropped(sender As Object, e As OrgChartGroupItemDropEventArguments) Handles RadOrgChart3.GroupItemDrop
SqlDataSource2.UpdateCommand = "Update GroupItems Set NodeID='" & Convert.ToString(e.DestinationNode.ID) & "' Where ID='" & Convert.ToString(e.SourceGroupItem.ID) & "'"
SqlDataSource2.Update()
RadOrgChart3.DataBind()
End Sub
Private Sub RadOrgChart3_NodeDropped(sender As Object, e As OrgChartNodeDropEventArguments) Handles RadOrgChart3.NodeDrop
SqlDataSource1.UpdateCommand = "Update Nodes Set ParentID='" & Convert.ToString(e.DestinationNode.ID) & "' Where ID='" & Convert.ToString(e.SourceNode.ID) & "'"
SqlDataSource1.Update()
RadOrgChart3.DataBind()
End Sub
The RadOrgChart does not persists it's structure in the ViewState. You need to rebind the control on every postback or change in the data source. Creating OrgChart hierarchy during runtime (adding Nodes/GroupItems from code behind) or in the markup, and using at the same time drag-and-drop is incompatible, because it is not possible to mark when a Node/GroupItem is moved. Please use drag-and-drop feature when you are bind to a data source.