RadTreeList Drag and Drop Value Assignment

1 Answer 59 Views
TreeList
Matt
Top achievements
Rank 1
Matt asked on 09 Oct 2021, 03:29 PM

Hello,

I am attempting to integrate the drag/drop feature into a RadTreeList. The dragging is enabled and seems to work great but when an item is dropped it attempts a postback but does not change position. I assume this is because I need to manually assign it a value in comparison to a parent item. Does anyone have any experience or examples they could provide to display this functionality better? The most I have found online was this brief article:

https://docs.telerik.com/devtools/aspnet-ajax/controls/treelist/items/items-drag-and-drop

My code:

       <telerik:RadTreeList ID="treeViewGrid" runat="server" DataKeyNames="ModuleId" CommandItemDisplay="Top" ParentDataKeyNames="ParentId" AutoGenerateColumns="false" EnableDragAndDrop="true">
            <ClientSettings AllowItemsDragDrop="true">
    <Selecting AllowItemSelection="True" />
                </ClientSettings>
            <Columns>

....

</columns>

....

 

Database:

moduleid
1
displayorder
1
moduletype
1
parentid
0
displayorder
2
moduletype
1
parentid
0
moduleid
2

 

 

My guess would be that there is a OnDropItem that runs server side where I can assign a new display order based on the previous order. Any help on this is appreciated! Thanks!

1 Answer, 1 is accepted

Sort by
0
Eric R | Senior Technical Support Engineer
Telerik team
answered on 13 Oct 2021, 04:12 PM

Hi Matt,

Depending on the full implementation, the behavior described is likely because the RadAjaxManager is not configured to handle the Drop update. Let me explain more below. 

RadAjaxManager Control Updates

When an item is dragged and dropped from RadTreeList1 to RadTreeList2 the RadAjaxManager will create an AJAX request to update the corresponding control(s). The settings would look like the following. 

Note that below, the RadTreeList1 references itself and RadTreeList2 which will enable updating both controls.

<telerik:AjaxSetting AjaxControlID="RadTreeList1">
    <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="RadTreeList1" />
        <telerik:AjaxUpdatedControl ControlID="RadTreeList2" />
    </UpdatedControls>
</telerik:AjaxSetting>

However, there may be some additional implementation details that I am not able to see. For a working example of this, see the TreeList - Items Drag-and-Drop demo. We also include the markup, code-behind, JavaScript and CSS files to review event handling and styling for the demo.

Wrapping Up

For additional reference, I have extracted that same demo and attached it to this ticket which can be used to review locally. However, to run it you will need a licensed version.

Please let me know if you need any additional information. Thank you for using the UI for ASP.NET AJAX forums.

Regards,


Eric R | Senior Technical Support Engineer
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
TreeList
Asked by
Matt
Top achievements
Rank 1
Answers by
Eric R | Senior Technical Support Engineer
Telerik team
Share this question
or