drag &drop from rad list

2 posts, 1 answers
  1. Sigma
    Sigma avatar
    87 posts
    Member since:
    Apr 2012

    Posted 07 Aug 2012 Link to this post

    hai,
    How to enable Drag and drop from RadListBox to RadOrgChart
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 07 Aug 2012 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top