• Articles
  • Buy Now
  • Back to Orgchartcomponent.com
  • View Demo:

Demo 1 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

CodeCode

C# Code

  protected void Page_Load(object sender, EventArgs e)
    {
        // Connect the chart to the data source
        // In this example we are holding a table in memory
        DragDropChart.DataSource = Data;

        // Hook up the Drag Drop event handler.  This could be done in the ASPX file.
        DragDropChart.ItemDropped += new OrgChart.Core.OrganisationChartDragDropEventHandler(DragDropChart_ItemDropped);
    }

    /// <summary>
    /// This method is called once an item is dragged and dropped onto another item!
    /// </summary>
    /// <param name="sender">The Org Chart</param>
    /// <param name="DraggedItemId">The ItemId of the dragged item</param>
    /// <param name="DroppedItemId">The ItemId of dropped item</param>
    bool DragDropChart_ItemDropped(object sender, string DraggedItemId, string DroppedItemId)
    {
        // Don't let the user change the first ( root item ) 
        if (DraggedItemId == "1")
        {
            // Returning false "Cancels" the drop event
            return false;
        }

        // Update the data source
        UpdateRow(DraggedItemId, DroppedItemId);
        return true;
    }

Html Markup

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

Valid XHTML 1.0 Transitional Valid CSS!