Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > General Discussions > Treeview not Raising Drag-and-Drop Events
Telerik MVC Extensions are no longer supported (see this page for reference). In case you have inquiries about Kendo UI Complete for ASP.NET MVC, post them in the pertinent Kendo UI forums.

Not answered Treeview not Raising Drag-and-Drop Events

Feed from this thread
  • Darin avatar

    Posted on Feb 28, 2012 (permalink)

    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>

  • Daniel Daniel admin's avatar

    Posted on Feb 29, 2012 (permalink)

    Hello Darin,

    The most likely cause for  the problem is that jQuery is included twice. You should disable the automatic registration of the file from the ScriptRegistrar with the jQuery method.
    If the problem persists, please send a sample project so I can investigate further.

    Greetings,
    Daniel
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now.

  • Darin avatar

    Posted on Feb 29, 2012 (permalink)

    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

  • Darin avatar

    Posted on Mar 1, 2012 (permalink)

    Got it to work by changing $('#TelerikTreeview').data('tTreeview') to 
    $('#TelerikTreeview').data('tTreeView').
    
    Darin

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > General Discussions > Treeview not Raising Drag-and-Drop Events