drag &drop from rad list

[Sigma]

hai,
How to enable Drag and drop from RadListBox to RadOrgChart

[Princy]

Hi Sigma,

Try the following code snippet to achieve your scenario.

ASPX:

<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
  <AjaxSettings>
     <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
       <UpdatedControls>
          <telerik:AjaxUpdatedControl ControlID="RadListBox1" LoadingPanelID="RadAjaxLoadingPanel1" />
          <telerik:AjaxUpdatedControl ControlID="RadOrgChart1" LoadingPanelID="RadAjaxLoadingPanel1" />
       </UpdatedControls>
     </telerik:AjaxSetting>
       <telerik:AjaxSetting AjaxControlID="RadOrgChart1">
          <UpdatedControls>
            <telerik:AjaxUpdatedControl ControlID="RadOrgChart1" LoadingPanelID="RadAjaxLoadingPanel1" />
          </UpdatedControls>
       </telerik:AjaxSetting>
  </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Default">
</telerik:RadAjaxLoadingPanel>
<asp:HiddenField runat="server" ID="SessionID" />
<div class="newEmployees">
  <telerik:RadListBox ID="RadListBox1" runat="server" Width="200px" Height="225px" OnClientDragging="OnClientDragging" EnableDragAndDrop="true" OnClientDropping="OnClientDropping" DataTextField="Name" DataValueField="ImageUrl">
     <ItemTemplate>
        <img class="product-image" width="30" height="37" src='<%# DataBinder.Eval(Container, "Value")%>' alt="product image" />
        <span class="product-title"><%# DataBinder.Eval(Container, "Text")%></span>
     </ItemTemplate>
     <HeaderTemplate>
        <span>Employees Transfer List</span>
     </HeaderTemplate>
  </telerik:RadListBox>
</div>
<div class="organizedEmployees">
  <telerik:RadOrgChart ID="RadOrgChart1" runat="server" EnableDragAndDrop="true" GroupColumnCount="2">
     <ItemTemplate>
       <span class="pseudoImage" style="background-image: url('<%# DataBinder.Eval(Container, "ImageUrl") %>')"> </span> <strong>
       <%# DataBinder.Eval(Container, "Text") %></strong>
       <input type="button" class="rocRemoveItemButton" value="" />
     </ItemTemplate>
  </telerik:RadOrgChart>
</div>
<asp:SqlDataSource ID="ItemsDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:DragAndDropOrgChart %>" SelectCommand="SELECT * FROM [GroupItems]"></asp:SqlDataSource>
<asp:SqlDataSource ID="NodesDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:DragAndDropOrgChart %>" SelectCommand="SELECT * FROM [Nodes]"></asp:SqlDataSource>
<asp:SqlDataSource ID="ListBoxItems" runat="server" ConnectionString="<%$ ConnectionStrings:DragAndDropOrgChart %>" SelectCommand="SELECT * FROM [ListBoxItems]"></asp:SqlDataSource>
</div>

JS:

<script type="text/javascript">
            var dropClue;
            var noDropClue;

            var $ = $telerik.$;

            function pageLoad() {
                dropClue = $(".dropClue")[0];
                noDropClue = $(".noDropClue")[0];

                $(".rocRemoveItemButton").click(function myfunction(e) {
                    removePerson(e);
                })

                $(document).mouseup(function () {
                    dropClue.style.display = "none";
                    noDropClue.style.display = "none";
                });
            }

            function removePerson(e) {
                var orgChart = $find("<%= RadOrgChart1.ClientID %>");

                var index = orgChart._extractGroupItemFromDomElement(e.target).get_index();
                var hierarchicalIndex = orgChart._extractNodeFromDomElement(e.target)._getHierarchicalIndex();
                $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("remove-" + index + "-" + hierarchicalIndex);

            }

            function OnClientDropping(sender, args) {
                var orgChart = $find("<%= RadOrgChart1.ClientID %>");
                var itemText = args.get_sourceItem().get_text().trim();
                if (args.get_htmlElement().className.indexOf("rocGroup") != -1 || $(args.get_htmlElement()).parents(".rocGroup").length > 0) {
                    var hierarchicalIndex = orgChart._extractNodeFromDomElement(args.get_htmlElement())._getHierarchicalIndex();
                    $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("drop-" + itemText + "-" + hierarchicalIndex);
                }

                dropClue.style.display = "none";
                noDropClue.style.display = "none";
            }

            function OnClientDragging(sender, args) {

                var event = args.get_domEvent();
                var scrollOffset = $telerik.getScrollOffset(document.body, true);
                var top = (event.clientY + (window.pageYOffset || scrollOffset.y));
                var left = (event.clientX + (window.pageXOffset || scrollOffset.x));


                if (args.get_htmlElement().className.indexOf("rocGroup") != -1 || $(args.get_htmlElement()).parents(".rocGroup").length > 0) {
                    noDropClue.style.display = "none";
                    dropClue.style.top = top + 10 + "px";
                    dropClue.style.left = left + 20 + "px";
                    dropClue.style.display = "block";
                }
                else {
                    dropClue.style.display = "none";
                    noDropClue.style.top = top + 10 + "px";
                    noDropClue.style.left = left + 20 + "px";
                    noDropClue.style.display = "block";
                }
            }
</script>

C#:

private DataTable teams;
private DataTable employees;
private DataTable initialeEmployees;
protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
    }
protected void Page_Load(object sender, EventArgs e)
    {

        RadOrgChart1.NodeDrop += new Telerik.Web.UI.OrgChartNodeDropEventHandler(RadOrgChart1_NodeDrop);
        RadOrgChart1.GroupItemDrop += new Telerik.Web.UI.OrgChartGroupItemDropEventHandler(RadOrgChart1_GroupItemDrop);
        RadOrgChart1.GroupEnabledBinding.NodeBindingSettings.DataFieldID = "TeamID";
        RadOrgChart1.GroupEnabledBinding.NodeBindingSettings.DataFieldParentID = "ReportsTo";
        RadOrgChart1.RenderedFields.NodeFields.Add(new Telerik.Web.UI.OrgChartRenderedField() { DataField = "TeamNames" });
        RadOrgChart1.GroupEnabledBinding.NodeBindingSettings.DataSource = NodesDataSource;
        RadOrgChart1.GroupEnabledBinding.GroupItemBindingSettings.DataFieldID = "EmployeeID";
        RadOrgChart1.GroupEnabledBinding.GroupItemBindingSettings.DataFieldNodeID = "TeamID";
        RadOrgChart1.GroupEnabledBinding.GroupItemBindingSettings.DataTextField = "Name";
        RadOrgChart1.GroupEnabledBinding.GroupItemBindingSettings.DataImageUrlField = "ImageUrl";
        RadOrgChart1.GroupEnabledBinding.GroupItemBindingSettings.DataSource = ItemsDataSource;
        RadOrgChart1.DataBind();
        RadListBox1.DataSource = ListBoxItems;
        RadListBox1.DataBind();
        RadListBox1.SortItems();
    }
void RadOrgChart1_GroupItemDrop(object sender, Telerik.Web.UI.OrgChartGroupItemDropEventArguments e)
    {
        using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DragAndDropOrgChart"].ConnectionString))
        {
            string updateString = @"UPDATE GroupItems SET TeamID = @TeamID WHERE [EmployeeID]=" + e.SourceGroupItem.ID;
            using (SqlCommand cmd = new SqlCommand(updateString, con))
            {
                cmd.Parameters.Add(new SqlParameter("@TeamID", e.DestinationNode.ID));
                cmd.Connection.Open();
                cmd.ExecuteNonQuery();
                cmd.Connection.Close();
            }
        }

        RadOrgChart1.DataBind();
    }
void RadOrgChart1_NodeDrop(object sender, Telerik.Web.UI.OrgChartNodeDropEventArguments e)
    {

        using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DragAndDropOrgChart"].ConnectionString))
        {
            string updateString = @"UPDATE Nodes SET ReportsTo = @ReportsTo WHERE [TeamID]=" + e.SourceNode.ID;
            using (SqlCommand cmd = new SqlCommand(updateString, con))
            {
                cmd.Parameters.Add(new SqlParameter("@ReportsTo", e.DestinationNode.ID));
                cmd.Connection.Open();
                cmd.ExecuteNonQuery();
                cmd.Connection.Close();
            }
        }

        RadOrgChart1.DataBind();
    }
protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        char[] seps = { '-' };
        string[] textAndIds = e.Argument.Split(seps, StringSplitOptions.None);

        char[] sep = { ':' };
        string[] stringIds = textAndIds[2].Split(sep, StringSplitOptions.RemoveEmptyEntries);
        int[] ids = new int[stringIds.Length];
        for (int i = 0; i < stringIds.Length; i++)
        {
            ids[i] = Int32.Parse(stringIds[i]);
        }

        if (textAndIds[0] == "drop")
        {
            string newText = textAndIds[1];


            OrgChartNode node = (OrgChartNode)RadOrgChart1.GetNodeByHierarchicalIndex(ids);

            string imageUrl = "";
            foreach (RadListBoxItem item in RadListBox1.Items)
            {
                if (item.Text==newText)
                {
                    imageUrl = item.Value;
                }
            }

            using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DragAndDropOrgChart"].ConnectionString))
            {
                string deleteString = @"DELETE FROM [ListBoxItems] WHERE [Name] = @Name";
                using (SqlCommand cmd = new SqlCommand(deleteString, con))
                {
                    cmd.Parameters.Add(new SqlParameter("@Name", newText));
                    cmd.Connection.Open();
                    cmd.ExecuteNonQuery();
                    cmd.Connection.Close();
                }
            }

            using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DragAndDropOrgChart"].ConnectionString))
            {

                string insertString = @"INSERT INTO [GroupItems] (TeamID, Name, ImageUrl) values (@TeamID, @Name, @ImageUrl)";
                using (SqlCommand cmd = new SqlCommand(insertString, con))
                {
                    cmd.Parameters.Add(new SqlParameter("@TeamID", node.ID));
                    cmd.Parameters.Add(new SqlParameter("@Name", newText));
                    cmd.Parameters.Add(new SqlParameter("@ImageUrl", imageUrl));
                    cmd.Connection.Open();
                    cmd.ExecuteNonQuery();
                    cmd.Connection.Close();
                }
            }


        }
        else if(textAndIds[0] == "remove")
        {
            int groupIndex = Int32.Parse(textAndIds[1]);

            OrgChartNode node = (OrgChartNode)RadOrgChart1.GetNodeByHierarchicalIndex(ids);
            OrgChartGroupItem groupItem = node.GroupItems[groupIndex];
            using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DragAndDropOrgChart"].ConnectionString))
            {
                string deleteString = @"DELETE FROM [GroupItems] WHERE [Name] = @Name";
                using (SqlCommand cmd = new SqlCommand(deleteString, con))
                {
                    cmd.Parameters.Add(new SqlParameter("@Name", groupItem.Text));
                    cmd.Connection.Open();
                    cmd.ExecuteNonQuery();
                    cmd.Connection.Close();
                }
            }

            using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DragAndDropOrgChart"].ConnectionString))
            {

                string insertString = @"INSERT INTO [ListBoxItems] (Name, ImageUrl) values ( @Name, @ImageUrl)";
                using (SqlCommand cmd = new SqlCommand(insertString, con))
                {
                    cmd.Parameters.Add(new SqlParameter("@Name", groupItem.Text));
                    cmd.Parameters.Add(new SqlParameter("@ImageUrl", groupItem.ImageUrl));
                    cmd.Connection.Open();
                    cmd.ExecuteNonQuery();
                    cmd.Connection.Close();
                }
            }
        }

        Session[SessionID.Value + "EmployeesGroupEnabledBindingCS"] = employees;
        Session[SessionID.Value + "InitialEmployees"] = initialeEmployees;
        RadOrgChart1.DataBind();
        RadListBox1.DataBind();
        RadListBox1.SortItems();
    }

please take a look into this for more information.

Regards,
Princy