Hint using Drag and Drop, LoadonDemand and Updatepanels for large Trees

[Christian]

Hi,
i am starting a project with two trees on one page, with both drag and drop enabled. It should be possible to drag and drop from one tree to the other one and copy or move the subtrees. Multiselect should be enabled too and no postbacks are allowed.
The trees will have an nodecount up to 6000 nodes.
The tree will be loaded from xml out of an database. There will be an save-button to persist the changes in the tree to the xml / database.
Can someone give me an hint ho to realize this?

Is it possible to use loadondemand with serverclientcallback and draganddrop?
Should i user serverside loadondemand and put the two trees inside updatepanels?
Or should i use clientside dragDrop?
What combination of drag and drop, load on demand and updatepanels is the best for this scenario?

Thank you very much
Christian

[Simon]

Hi Christian,

This is a very interesting case which involves the combination of several techniques to achieve a lightweight and visually-interrupted process.

With RadTreeView and RadAjaxManager for ASP.NET AJAX you can:

• Use the Load-On-Demand functionality of RadTreeView to load its Nodes.
• Perform client-side drag and drop in conjunction with the track/commitChanges() methods of RadTreeView to persist at the server any changes made at the client.
• User RadAjaxManager to initiate an AJAX request to the server. At the server get the XML of the TreeView and update update its state to the database.

UpdatePanels will increase the amount of data transmitted between the client and server. By using the built-in Load-On-Demand functionality of the TreeView and the ability to save the client-state of the TreeView via AJAX the minimum amount of data will be transfered, therefore the page will work faster. Additionaly, using the RadAjaxManager to do AJAX requests on a client-side element's event (onclick of the 'Save' Button) will lead to less data transferred than when using UpdatePanels.

Below are listed the most important articles and examples which will help you to implement the approach:

• ServerSideCallBack (Load-On-Demand) Demo
• ServerSideCallBack (Load-On-Demand) Help Article
• (Client-Side) Drag&Drop Example
• The RadTreeNodeCollection Object (track/commitChanges() functions)
• AJAX Manager

I hope this will get you started.

Sincerely yours,
Simon
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Christian]

Hello,
thank you very much for the fast reply.
This works pretty good, but I have the problem to differ between ways, the nodes get into the treeview. How can I differ between nodes loaded on demand and nodes inserted by drag and drop on the clientside?

Thanks
Christian

[Veselin Vasilev]

Hello Christian,

One of the approaches is to use CustomAttributes. You can assign a custom attribute on NodeExpand event to the nodes and later check for that attribute.

More on CustomAttributes can be found here:
http://www.telerik.com/help/aspnet-ajax/tree_attributes.html

Kind regards,
Veskoni
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.