Child nodes lost after dragging

8 posts, 0 answers
  1. AP
    AP avatar
    256 posts
    Member since:
    Apr 2010

    Posted 22 Aug 2012 Link to this post

    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?
  2.
  3. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 27 Aug 2012 Link to this post

    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!
  5. AP
    AP avatar
    256 posts
    Member since:
    Apr 2010

    Posted 28 Aug 2012 Link to this post

    Thanks, I'll try that.
  7. AP
    AP avatar
    256 posts
    Member since:
    Apr 2010

    Posted 29 Aug 2012 Link to this post

    Sorry, I tried v2012.2.823 , and the problem still persists.
  8.
  9. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 29 Aug 2012 Link to this post

    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!
  11. AP
    AP avatar
    256 posts
    Member since:
    Apr 2010

    Posted 29 Aug 2012 Link to this post

    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 .
  13. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 30 Aug 2012 Link to this post

    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!
  15. AP
    AP avatar
    256 posts
    Member since:
    Apr 2010

    Posted 30 Aug 2012 Link to this post

    Thanks - I think I'll log a support ticket and upload a sample, which enables the problem to be reproduced.
Back to Top