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

[Solved] Treeview not Raising Drag-and-Drop Events

3 Answers 46 Views

General Discussions

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

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

Darin asked on 28 Feb 2012, 06:55 PM

I'm having some trouble with the treeview raising the OnNodeDropped event (or any other for that matter). I'm looking forward to learning about the easy fix on this one. Code follows:

Partial View

@model IEnumerable<NavigationTreeNode>
@using Telerik.Web.Mvc.UI;
@using System.Collections;
 
@{
    Layout = null;
}
 
@(Html.Telerik().TreeView().Name("TelerikTreeview")
    .ClientEvents(events => events
        .OnNodeDropped("onNodeDropped"))
    .ShowLines(true)
    .DragAndDrop(true)
    .BindTo((IEnumerable)Model, mappings =>
    {
        mappings.For<NavigationTreeNode>(binding => binding
            .ItemDataBound((item, treenode) =>
            {
                item.Text = treenode.ShortTitle;
                item.Value = treenode.FileName;
                item.Url = treenode.Url;
            })
            .Children(treenode => treenode.Children));
        mappings.For<NavigationTreeNode>(binding => binding
            .ItemDataBound((item, child) =>
            {
                item.Text = child.ShortTitle;
                item.Value = child.FileName;
                item.Url = child.Url;
            }));
    }))
 
    <script type="text/javascript">
        function onNodeDropped(e) {
            var treeview = $('#TelerikTreeview').data('tTreeview');
            var nodeText = 'OnNodeDropped :: ' + treeview.getItemText(e.item) + ' :: ' + treeview.getItemText(e.destinationItem);
            window.open(nodeText);
        }
    </script>

_Layout.cshtml

@using Telerik.Web.Mvc.UI;
<!DOCTYPE html>
<html>
<head>
	<title>@ViewBag.Title</title>
	<link href="@Url.Content("~/Content/reset.css")" rel="stylesheet" type="text/css" />
	<link href="@Url.Content("~/Content/960.css")" rel="stylesheet" type="text/css" />
	<link href="@Url.Content("~/Content/site.css")" rel="stylesheet" type="text/css" />
	
	<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js" type="text/javascript"></script>
	<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
	<script src="//ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
 
	@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group
		.Add("telerik.common.min.css")
		.Add("telerik.web20.min.css")
		.Combined(true)
		.Compress(true)))
</head>
<body>
	<div class="container_12">
		<div class="grid_9 header">
			<h1>
				Control Panel</h1>
		</div>
		<div class="grid_3 header">
			@Html.Partial("_LogOnPartial")
		</div>
		<!-- Content -->
		@if (IsSectionDefined("Menu"))
		{ 
			<div class="grid_3 menu">
				@RenderSection("Menu", false)
			</div>
			<div class="grid_9 content">
				@RenderSection("Editor", false)
			</div>
		}
		@if (!IsSectionDefined("Menu"))
		{
			<div class="grid_12 content">
				@RenderBody()
			</div>        
		}
	</div>
@(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group
	.Combined(true)
	.Compress(true)))
</body>
</html>

3 Answers, 1 is accepted

answered on 29 Feb 2012, 09:27 PM

Daniel,

Thank you for the suggestion, but it did not help. I cannot really split the code out from our main project, there's just too much there and it will break the model and databinding effort. Basically, I databind a model to the treeview and just want to raise the normal events like OnNodeDropped to allow us to update the model and a database whenever a user drags a node to a new position in the tree.

Interestingly, I was able to pop up an alert using a Javascript function on treeview load. It seems that dragging and dropping simply will not raise events as described in your documentation.

Thanks for the effort - I really do appreciate it.

Darin