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
Top achievements
Rank 1
Veteran
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

Sort by
0
Alex Gyoshev
Telerik team
answered on 27 Aug 2012, 08:08 AM
Hello Andrew,

Can you please try the latest internal build? We have addressed numerous issues which might be related to the problem.

Kind regards,
Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
AP
Top achievements
Rank 1
Veteran
answered on 28 Aug 2012, 07:35 AM
Thanks, I'll try that.
0
AP
Top achievements
Rank 1
Veteran
answered on 29 Aug 2012, 08:05 AM
Sorry, I tried v2012.2.823 , and the problem still persists.
0
Alex Gyoshev
Telerik team
answered on 29 Aug 2012, 09:05 AM
Hello Andrew,

We could not reproduce the problem (with the official build) -- here's a jsBin sample. Can you please show it there so that we may understand the problem?

All the best,
Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
AP
Top achievements
Rank 1
Veteran
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>
</head>
<body>
  <div id="AjaxTreeView"></div>
   
  <script src="http://code.jquery.com/jquery-1.7.1.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 .
0
Alex Gyoshev
Telerik team
answered on 30 Aug 2012, 07:37 AM
Hello Andrew,

Indeed, adding a loadOnDemand: false breaks the example, because the transport wasn't suitable for this. I have updated the example with the code you described, but I still cannot reproduce the problem. If the configured example doesn't show your scenario, adjust it accordingly so that it shows the problem.

Greetings,
Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
AP
Top achievements
Rank 1
Veteran
answered on 30 Aug 2012, 10:04 AM
Thanks - I think I'll log a support ticket and upload a sample, which enables the problem to be reproduced.
Tags
TreeView
Asked by
AP
Top achievements
Rank 1
Veteran
Answers by
Alex Gyoshev
Telerik team
AP
Top achievements
Rank 1
Veteran
Share this question
or