TreeList Drag drop query

[Mohith]

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

[Angel Petrov]

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

[Mohith]

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();
            }
        }

[Angel Petrov]

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

[Mohith]

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!!

[Angel Petrov]

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

[Mohith]

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"


[Juliano]

Very good, this was my error also. Thanks.