Drag and Drop with XML binding

[Charles]

Is there any way to enable drag and drop if you bind to xml?

[Peter Filipov]

Hello Charles,

Thank you for contacting Telerik Support.

RadOrgChart control exposes Drop events and you should manually update the underlying data source. Even if the control is bound to XML the event will be fired and you could handle them. 

I will be glad to assist you further.

Regards,
Peter Filipov
the Telerik team

[Charles]

I guess I am not fully getting how to enable drag and drop when I load from xml. This is what my .aspx code looks like:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <style type="text/css">
    .newItemSizeSimple
    {
        width:150px !important;
        height:80px !important;
    }

    .newItemSizeSimple .rocItemContent
    {
        height:70px !important;
        text-align:center;
    }
    </style>

</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <h2>
        OrgChart App
    </h2>
    <p>
            <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Default"></telerik:RadAjaxLoadingPanel>
            <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel" LoadingPanelID="RadAjaxLoadingPanel1">
            <telerik:RadOrgChart ID="RadOrgChart1" CssClass="newItemSizeSimple"
                    DisableDefaultImage="true" runat="server"
                    EnableDragAndDrop="true"
                    onnodedrop="RadOrgChart1_NodeDropped"
                    AllowGroupItemDragging="True"
                    EnableCollapsing="True"
                    EnableDrillDown="True"
                    EnableGroupCollapsing="True" ondatabound="RadOrgChart1_DataBound"
                    onnodedatabound="RadOrgChart1_NodeDataBound">
            </telerik:RadOrgChart>
            </telerik:RadAjaxPanel>
    </p>
</asp:Content>

And here is my C# code.

public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            RadOrgChart1.LoadContentFile(@"~\XMLFile1.xml");
        }

        protected void RadOrgChart1_NodeDropped(object sender, OrgChartNodeDropEventArguments e)
        {
            // Not firing!!!
            Console.WriteLine(e);
        }

        protected void RadOrgChart1_NodeDataBound(object sender, OrgChartNodeDataBoundEventArguments e)
        {
            // Not firing!!!
            Console.WriteLine(e);
        }

        protected void RadOrgChart1_DataBound(object sender, EventArgs e)
        {
            // Not firing!!!
            Console.WriteLine(e);
        }
    }

Even though I set the EnableDragAndDrop property to true, it doesn't allow the nodes to be moved. I am trying to create an "edit mode" where the user can add/delete nodes, move nodes around, and save the output to an xml file. I just got stuck on the move of the nodes part.

Any help would be appreciated!

[Peter Filipov]

Hi Charles,

Thank you for the provided code.

I reviewed the sample and found out what is causing that behavior. When you are loading the RadOrgChart control it presets its setting if they are specified in the XML file otherwise the setting are set to their default values. The resolution is to EnableDragAndDrop property after the xml load method. I am sending you a sample project for a reference.

Regards,
Peter Filipov
the Telerik team

[Charles]

This works! Thanks for the help.