TreeList Drag drop query

8 posts, 1 answers
  1. Mohith
    Mohith avatar
    8 posts
    Member since:
    Apr 2011

    Posted 18 Jan 2013 Link to this post

    Hi,

    I have a requirement of dragging few nodes from parent and dropping them on a different parent. I had a look at Treelist / Items Drag and Drop but this is for two different lists. My requirement is for a single list where nodes can be dragged and dropped. I could achieve drag functionality but with drop functionality, I am failing. Please help!!


    Mohith
  2. Angel Petrov
    Admin
    Angel Petrov avatar
    1007 posts

    Posted 23 Jan 2013 Link to this post

    Hi Mohith,

    Thank you for contacting us.

    Drag and drop inside RadTreeList can be implemented and such functionality is demonstrated in the demo you provided. In the example you can drag and drop an item inside the source tree list. Additionally I have created a sample project using the code from the demo which again shows this functionality. Please review the code and tell us is this what you were looking for.

    Let me know if I could assist you further.

    Kind regards,
    Angel Petrov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mohith
    Mohith avatar
    8 posts
    Member since:
    Apr 2011

    Posted 24 Jan 2013 Link to this post

    Hi Angel,

    Thanks for the code snippet. That is what I was looking for. I've implemented this code but currently I am not able to capture ID(I call it entryID)  of the target row. This is my code.

    ASP.Net code: 
    <telerik:RadTreeList ID="RadTreeList1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false"
            ParentDataKeyNames="ParentID" AllowMultiItemSelection="true" AllowRecursiveSelection="false" AllowPaging="true" PageSize="10" DataKeyNames="EntryID"
            OnItemDataBound="OnSettingsTreeListItemDataBound"
            OnItemUpdated="RadTreeList1_ItemUpdated"
            OnItemDrop="RadTreeList1_ItemDrop"
            OnItemCommand="RadTreeList1_ItemCommand"
            OnEditCommand="RadTreeList1_ItemEdited"
            >
     
            <ClientSettings AllowItemsDragDrop="true">
                <Selecting AllowItemSelection="True"></Selecting>
                 
                <ClientEvents   OnItemDropping="itemDropping"
                                OnItemDragging="itemDragging"
                                OnTreeListCreated="function(sender) { treeList1 = sender; }"
                                >
                </ClientEvents>
     
                <Scrolling AllowScroll="true" UseStaticHeaders="true" ></Scrolling>
            </ClientSettings>
     
                <Columns>
     
                     <telerik:TreeListDragDropColumn Visible="true" HeaderStyle-Width="20px" UniqueName="TreeListDragDropColumn">
                     </telerik:TreeListDragDropColumn>
     
                     <telerik:TreeListTemplateColumn HeaderText="Source" DataField="FirstName" visible="false">
                                <ItemTemplate>
                                    <table class="templateTable">
                                        <tr>
                                            <td class="templateHeader">
                                                <asp:Label ID="lblEntryID" runat="server" Visible="false" Text='<%# Bind("EntryID") %>'></asp:Label>
                                                <asp:Label ID="lblListName" runat="server" Visible="false" Text='<%# Bind("ListName") %>'></asp:Label>
                                                <asp:Label ID="lblText" runat="server" Visible="false" Text='<%# Bind("Text") %>'></asp:Label>
                                                <asp:Label ID="lblValue" runat="server" Visible="false" Text='<%# Bind("Value") %>'></asp:Label>
                                                <asp:Label ID="lblLevel" runat="server" Visible="false" Text='<%# Bind("Level") %>'></asp:Label>
                                                <asp:Label ID="lblLastModifiedOnDate" runat="server" Visible="false" Text='<%# Bind("LastModifiedOnDate") %>'></asp:Label>
                                                <asp:Label ID="lblParentID" runat="server" Visible="false" Text='<%# Bind("ParentID") %>'></asp:Label>
                                            </td>
                                        </tr>
                                    </table>
                                </ItemTemplate>
                     </telerik:TreeListTemplateColumn>
     
                     <telerik:TreeListBoundColumn DataField="EntryID" UniqueName="EntryID" HeaderText="List Name" visible="false">
                     </telerik:TreeListBoundColumn>
     
                     <telerik:TreeListBoundColumn DataField="ListName" UniqueName="ListName" HeaderText="List Name" >
                     </telerik:TreeListBoundColumn>
                     
                     <telerik:TreeListBoundColumn DataField="Text" UniqueName="Text" HeaderText="Location" >
                     </telerik:TreeListBoundColumn>
     
                     <telerik:TreeListEditCommandColumn UniqueName="EditCommandColumn" HeaderStyle-Width="100px"></telerik:TreeListEditCommandColumn>
                     <telerik:TreeListButtonColumn UniqueName="DeleteCommandColumn" Text="Delete" CommandName="Delete" HeaderStyle-Width="50px"></telerik:TreeListButtonColumn>
                 
                </Columns>
                 
            </telerik:RadTreeList>


    Javascript:
    function itemDropping(sender, eventArgs)
                {
                    var targetRow = findParentItem(eventArgs.get_destinationHtmlElement());
     
                    //Target row is descendant of the sender -> Reorder operation
                    if ($telerik.isDescendant(sender.get_element(), targetRow))
                        return;
     
                     
                    var itm = eventArgs.get_draggedItems()[0];
                    var employeeID = $find(targetRow.id).get_dataKeyValue("EntryID");
     
                    itm.fireCommand("ItemDropped", employeeID); //Fire custom command
                }


    c# code behind:
    protected void RadTreeList1_ItemCommand(object sender, TreeListCommandEventArgs e)
            {
                //lblTest.Text = e.CommandName;
                if (e.CommandName == "ItemDropped")
                {
                    TreeListDataItem item = e.Item as TreeListDataItem;
                    string managerID = e.CommandArgument.ToString();
                    /*if (Convert.ToInt32(item["Level"]) == 0 || Convert.ToInt32(item["Level"]) == 1)
                    {
                        e.Canceled = true;
                        return;
                    }*/
                     
                    //TreeListBoundColumn itemCol = RadTreeList1.GetColumnSafe("ListName") as TreeListBoundColumn;
                    string s = null;
                    TreeListDataItem dtitem = null;
                    if (e.Item is TreeListDataItem)
                    {
                        dtitem = e.Item as TreeListDataItem;
                        s = dtitem["EntryID"].Text;
                    }
                    else if (e.Item is TreeListDetailTemplateItem)
                    {
                        TreeListDetailTemplateItem detailItem = e.Item as TreeListDetailTemplateItem;
                        TreeListDataItem detdataitm = detailItem.ParentItem;
                        s = detdataitm["EntryID"].Text;
                    }
     
                    /*TreeListDetailTemplateItem detailItem = e.Item as TreeListDetailTemplateItem;
                    TreeListDataItem dataitem = detailItem.ParentItem;
                    string t = dataitem["EntryID"].Text;*/
     
                    //string strNewEntryID = item["EntryID"].Text;// item.Cells[0].Text;//(System.Int32) DataBinder.Eval(item.DataItem, "EntryID"); // Convert.ToInt32(item["EntryID"]);
                    //    lblTest.Text = "String is string " + strNewEntryID;
     
                    lblTest.Text = "string is string " + managerID;
                    SqlConnection connection = new SqlConnection(connString);
                    SqlCommand cmd = new SqlCommand("Update Lists Set ListName = @ListName, Text = @Text, Value = @Value, Level = @Level, ParentID = @ParentID, LastModifiedOnDate = getdate() Where EntryID = " + managerID + "; SELECT @ScopeID=SCOPE_IDENTITY()", connection);  //  INSERT INTO Lists (ListName, Text, Value) VALUES (@ListName, @Text, @Value);" +
                            //, connection);
     
                    cmd.CommandType = CommandType.Text;
     
                    connection.Open();
                    using (connection)
                    {
                        InsertItemsRecursively(item, managerID, connection, cmd);
                    }
     
                    if (item.CanExpand)//Delete the source items when item moving is enabled...
                      //...but only if item is not collapsed
                        RadTreeList1.PerformDelete(item);
     
                    RadTreeList1.Rebind();
                }
            }
  5. Answer
    Angel Petrov
    Admin
    Angel Petrov avatar
    1007 posts

    Posted 28 Jan 2013 Link to this post

    Hello Mohith,

    Are you experiencing difficulties capturing the EntryID server-side? If this is the case I suggest that you use the GetDataKeyValue() method instead of accessing the cell text. Please try the following code snippet and tell us if it works out for you:
    protected void RadTreeList1_ItemCommand(object sender, TreeListCommandEventArgs e)
        {
            //lblTest.Text = e.CommandName;
            if (e.CommandName == "ItemDropped")
            {
                TreeListDataItem item = e.Item as TreeListDataItem;
                string managerID = e.CommandArgument.ToString();
         
                string s = null;
                TreeListDataItem dtitem = null;
                if (e.Item is TreeListDataItem)
                {
                    dtitem = e.Item as TreeListDataItem;
                    s=dtitem.GetDataKeyValue("EntryID").ToString();
                }
                else if (e.Item is TreeListDetailTemplateItem)
                {
                    TreeListDetailTemplateItem detailItem = e.Item as TreeListDetailTemplateItem;
                    TreeListDataItem detdataitm = detailItem.ParentItem;
                    s = dtitem.GetDataKeyValue("EntryID").ToString();
                }
     
                lblTest.Text = "string is string " + managerID;
                SqlConnection connection = new SqlConnection(connString);
                SqlCommand cmd = new SqlCommand("Update Lists Set ListName = @ListName, Text = @Text, Value = @Value, Level = @Level, ParentID = @ParentID, LastModifiedOnDate = getdate() Where EntryID = " + managerID + "; SELECT @ScopeID=SCOPE_IDENTITY()", connection);  //  INSERT INTO Lists (ListName, Text, Value) VALUES (@ListName, @Text, @Value);" +
                //, connection);
     
                cmd.CommandType = CommandType.Text;
     
                connection.Open();
                using (connection)
                {
                    InsertItemsRecursively(item, managerID, connection, cmd);
                }
     
                if (item.CanExpand)//Delete the source items when item moving is enabled...
                    //...but only if item is not collapsed
                    RadTreeList1.PerformDelete(item);
     
                RadTreeList1.Rebind();
            }
        }

    All the best,
    Angel Petrov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Mohith
    Mohith avatar
    8 posts
    Member since:
    Apr 2011

    Posted 29 Jan 2013 Link to this post

    Hi Angel,

    Thanks for your quick reply.

    I am having difficulties capturing id of the row (target row) onto which the dragged row is dropped, at client side. Here is javascript snippet

    var itm = args.get_draggedItems()[0];
    var targetID = $find(targetRow.id).get_dataKeyValue("EntryID");
    alert("Hi there " + targetID);
    itm.fireCommand("ItemDropped", targetID); //Fire custom command

    I am getting targetID as "undefined". not sure what's going on.. please help!!
  7. Angel Petrov
    Admin
    Angel Petrov avatar
    1007 posts

    Posted 30 Jan 2013 Link to this post

    Hello Mohith,

    Please review the project I have previously sent you and let me know what are the differences between your implementation and mine. I see that in your code a check if the target row is a descendant of the sender is missing:

    JavaScript
    function itemDropping(sender, args)
            {
                var targetRow = findParentItem(args.get_destinationHtmlElement());
     
                //Target row is null or not a child of RadTreeList -> Cancel
                if (targetRow == null || !get_isTreeListChild(targetRow))
                {
                    args.set_cancel(true);
                    return;
                }
     
                //Target row is descendant of the sender -> Reorder operation
                if ($telerik.isDescendant(sender.get_element(), targetRow))
                    return;
     
                var itm = args.get_draggedItems()[0];
                var employeeID = $find(targetRow.id).get_dataKeyValue("EntryID");
                alert(employeeID);
                itm.fireCommand("CustomItemsDropped", employeeID); //Fire custom command
            }

    By going through the example again you should be able to resolve the problem.

    All the best,
    Angel Petrov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Mohith
    Mohith avatar
    8 posts
    Member since:
    Apr 2011

    Posted 11 Feb 2013 Link to this post

    Hi Angel,

    After adding the below to the RadTreeList definition, I am able to capture the target Id at client side. Again, thanks a ton for all your help!

    ClientDataKeyNames="EntryID"
  9. Juliano
    Juliano avatar
    1 posts
    Member since:
    Mar 2013

    Posted 08 Jul 2014 in reply to Mohith Link to this post

    Very good, this was my error also. Thanks.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017