Flexible and versatile organisational charts for ASP.NET using
Org Chart Component.


ASP.NET Org Chart Component - Dragging And Dropping An Org Chart

New in version 3.2 The ASP.NET Org Chart Component supports drag and drop. To enable drag and drop the page developer:

  • Enables the drag and drop functionality by setting the property DragDropSettings.Enabled to true.
  • Binds to the ItemDropped event.
  • Writes custom code to update the data source when an item is dropped.


Drag the items on the chart below to rearrange the organisation!  

Big Cheese
Bill
Sally
Mike
Sue
John
Ben
Fred
Hannah
Tom


Code:

C# Code

   1:  protected void Page_Load(object sender, EventArgs e)
   2:      {
   3:          // Connect the chart to the data source
   4:          // In this example we are holding a table in memory
   5:          DragDropChart.DataSource = Data;
   6:   
   7:          // Hook up the Drag Drop event handler.  This could be done in the ASPX file.
   8:          DragDropChart.ItemDropped += new OrgChart.Core.OrganisationChartDragDropEventHandler(DragDropChart_ItemDropped);
   9:      }
  10:   
  11:      /// <summary>
  12:      /// This method is called once an item is dragged and dropped onto another item!
  13:      /// </summary>
  14:      /// <param name="sender">The Org Chart</param>
  15:      /// <param name="DraggedItemId">The ItemId of the dragged item</param>
  16:      /// <param name="DroppedItemId">The ItemId of dropped item</param>
  17:      bool DragDropChart_ItemDropped(object sender, string DraggedItemId, string DroppedItemId)
  18:      {
  19:          // Don't let the user change the first ( root item ) 
  20:          if (DraggedItemId == "1")
  21:          {
  22:              // Returning false "Cancels" the drop event
  23:              return false;
  24:          }
  25:   
  26:          // Update the data source
  27:          UpdateRow(DraggedItemId, DroppedItemId);
  28:          return true;
  29:      }

Html Markup

   1:  <cc1:DataBoundOrganisationChart ID="DragDropChart" runat="server">
   2:                  <DragDrop Enabled="true" />                
   3:  </cc1:DataBoundOrganisationChart>