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

Child nodes lost after dragging

7 Answers 125 Views

TreeView

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

AP asked on 22 Aug 2012, 02:01 PM

I'm loading a treeview with hierarchical data, via a kendo hierarchical datasource:-

var treeSource = new kendo.data.HierarchicalDataSource({

schema:{

model:{

hasChildren:"HasChildren",

children: "Items",

id:"Id"

}

$('#AjaxTreeView').kendoTreeView({

dataSource: treeSource,

template: "#= item.Text # ",

loadOnDemand: false,

dragAndDrop: true,

select: onSelect,

drag: onNodeDragging

});

This displays the data fine (each node has formatted HTML text as it's value - which is why a template is defined), however when a node is dragged and dropped onto another one, quite often the child nodes disappear (and sometimes even the node being dropped disappears).

I also have a function which restricts the dragging operation to valid nodes

function onNodeDragging(e) {

if (!isDropAllowed(e))

e.setStatusClass("k-denied");

}

This doesn't happen every time, but over about 75% of the time.

Is this a bug, or do I need to do anything else?

7 Answers, 1 is accepted

answered on 29 Aug 2012, 01:23 PM

I can see that your sample works - however I've got the load on demand optionn turned off - when I try that on your sample, drag and drop seems to stop working:-

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8 />

<title>Kendo Sample Application</title>

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.blueopal.min.css">

</head>

<body>

<div id="AjaxTreeView"></div>

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>

<script>

var i = 0;

var treeSource = new kendo.data.HierarchicalDataSource({

schema: {

model: {

hasChildren: "HasChildren",

id: "Id"

}

},

transport: {

read: function(options) {

options.success([

{ Id: i++, Text:

"<div><img alt='pathway' src='/PE/images/PathwayIcon.png' style='float:left;margin-right:2px; margin-top:8px'/><div style='font-size:x-small;'>OP - 3 Pathway : Referred to ??????<br/><span style='color:blue'>Patient ID:9999999 Paediatrics Test Dr  </span></div></div>"

+ i, HasChildren: true },

{ Id: i++, Text: "bar " + i, HasChildren: true },

{ Id: i++, Text: "baz " + i, HasChildren: true }

]);

}

});

$('#AjaxTreeView').kendoTreeView({

dataSource: treeSource,

template: "#= item.Text # ",

loadOnDemand: false,

dragAndDrop: true

});

</script>

</body>

</html>

I also added some html to the 1st tree, as it's representative of what I'm doing.

I'm populating the data source via an ajax call, when a user clicks a button on the page.

function treePop()

{

var pid = $('#txtPID').val();

$.ajax({

type: "POST",

async: true,

contentType: "application/json;charset=utf-8",

url: "@Url.Content("~/Home/GetTreeItems")",

data: '{"PID":"' + pid + '"}',

dataType: "json",

success: function(data){

//var treeview = $('#AjaxTreeView').data('kendoTreeView');

$('#spinner').hide();

PID=data.PID;

pathwayData=data.elementList;

elementCount=data.ElementCount;

treeSource.data(data.nodeList);

//treeview.bindTo(data.nodeList);

$('#treeShower').show();

},

error: function(){

alert("An error has occurred");

}

});

}

This is why I don't wish to reload the data, after a user drags a node, I need to prompt them to confirm the move, and then make an ajax request to update the database .