This is a migrated thread and some comments may be shown as answers.

[Solved] Drag and drop exampe request - treeview to another treeview

5 Answers 132 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Jason asked on 08 Sep 2010, 08:33 PM

Is it possible you could find an example of dragging from one treeview and dropping into another? I'm trying to do that currently with data bound grids (placing users into categories) and will post back the result. Here is my current code...

<% Html.Telerik().TreeView()

.Name("AccountsUnmapped")

.DragAndDrop(settings => settings

.DropTargets(".drop-area"))

.BindTo(Model, mappings =>

{

mappings.For<Account>(binding => binding

.ItemDataBound((treeItem, account) =>

{

treeItem.Text = account.AccountName;

treeItem.Value = account.AccountListID;

treeItem.Expanded = true;

})

.Children(account => account.Children));

})

.HtmlAttributes(new { style = "font-size:0.9em; height: 600px; overflow:auto;" })

.ClientEvents(e => e.OnNodeDrop("onAccountMapNodeDrop")

)

.Render();

%>

<% Html.Telerik().TreeView()

.Name("Category")

.BindTo(AccountMapCategory.GetAllCategories(),mappings =>

{

mappings.For<AccountMapCategory>(binding => binding

.ItemDataBound((treeItem, category) =>

{

treeItem.Text = category.CategoryName;

treeItem.Value = category.CategoryId.ToString();

treeItem.Expanded = true;

})

.Children(category => category.Children));

})

.HtmlAttributes(new { @class = "drop-area" })

I can get to the point where I can drag one to the other, and the (+) icon shows up - but it drops at the bottom of the tree. Any ideas?

5 Answers, 1 is accepted

answered on 08 Sep 2010, 08:40 PM

By the way, this is my OnDrop script...

function onAccountMapNodeDrop(e) {

var dropContainer = $(e.dropTarget).closest('.drop-area');

var treeview = $('#AccountMapUnmapped').data('tTreeView');

if (dropContainer.length > 0) {

$('<li class="t-item t-last"><div class="t-bot"><span class="t-in t-state-selected">'+ treeview.getItemText(e.item) + '</span>'+

'<input type="hidden" name="itemValue" class="t-input"></div></li>')

.hide().appendTo(dropContainer).slideDown('fast');

e.preventDefault();

}