Kendo jquery ui 2013.1.319 treeview drag and drop use with lazy loading

[cirilla]

Greetıngs. I want to use Kendo jquery UI lazy loading structure and use drag and drop mechanism together. But here some problems arise. For example, files are duplicated when I drag and drop onto a node that hasn't been opened yet. When I manually set the "HasChildren" column, GetNode() runs automatically, resulting in two of the same file with data from the server. Please don't point me to the new version, I have to use this version. Thanks.

         

           function get(data, id) {
                if (id == 0) {
                    options.success([]);
                    return;
                }
                if (!id) {
                    return data;
                } else {
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].id == id) {
                            return data[i].items;
                        } else if (data[i].items) {
                            var result = get(data[i].items, id);
                            if (result) {
                                if (result == null) {
                                    return null;
                                } else if (result.length == 0) {
                                    return null;
                                } else {
                                    return result;
                                }
                            }
                        }
                    }
                }
            }
            function getCurrent(data, id) {
                if (id == 0) {
                    options.success([]);
                    return;
                }
                if (!id) {
                    return data;
                } else {
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].id == id) {
                            return data[i];
                        } else if (data[i].items) {
                            var result = getCurrent(data[i].items, id);
                            if (result) return result;
                        }
                    }
                }
            }

            function getTreeView() {
                return $("#treeview").data("kendoTreeView");
            }


            //For TreeView Lazy Loading
            var service = "/DijitalArsiv/GetNode/";
            let getData = new kendo.data.HierarchicalDataSource({
                transport: {
                    read: function (options) {

                        var currentId = options.data.id;
                        var child = get(TreeView, currentId);
                        var currentNode = getCurrent(TreeView, currentId);


                        if (child) {
                            options.success(child);
                        } else {

                            $.ajax({
                                url: service,
                                data: { "id": currentId, "isMainFolder": currentNode.isMainFolder, "path": currentNode.path },
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                async: false,
                                success: function (response) {
  
                                    var data = $.parseJSON(response);
                                    if (data.items != null) {

                                      options.success(data.items);

                                    }
                                    TreeView = getTreeView().dataSource.view();

                                }
                            }).fail(function (result) {
                                options.error(result);
                            });
                        }
                    }
                },
                serverFiltering: false,
                schema: {
                    model: {
                        id: "id",
                        isMainFolder: "isMainFolder",
                        isDraggable: "isDraggable",
                        isDroppable: "isDroppable",
                        hasChildren: "hasChildren"
                    }
                }
            });

            $("#treeview").kendoTreeView({
                template: kendo.template($("#treeview-template").html()),
                dataSource: getData,
                dragAndDrop: true,
                loadOnDemand: true,
                dragend: function (event) {

                },
                drop: function (event) {

                    var localTreeView = getTreeView();
                    var movingItem = localTreeView.dataItem(event.sourceNode);
                    var destinationItem = localTreeView.dataItem(event.destinationNode);
                    var movingItemParent = localTreeView.dataItem(localTreeView.parent(event.sourceNode));

                    if (!event.valid) {
                        event.setValid(false);
                        return;
                    }

                    if (movingItem != null && destinationItem != null) {

                        if (destinationItem.id == movingItemParent.id) {
                            event.setValid(false);
                            return;
                        }

                        if (!movingItem.isDraggable) {
                            event.setValid(false);
                            return;
                        }

                        if (!destinationItem.isDroppable) {
                            event.setValid(false);
                            return;
                        }

                        if (destinationItem.spriteCssClass != "folder") {
                            event.setValid(false);
                            return;
                        }

                        if (event.dropPosition == "after" || event.dropPosition == "before") {
                            event.setValid(false);
                            return;
                        }

                               
                        FileTransfer(movingItem, destinationItem);
                      

                    } else {
                        event.setValid(false);
                        return;
                    }

                },
                select: function (event) {
                    var node = $("#treeview").getKendoTreeView().dataItem(event.node);
                    $(".nodeIconGroup").css("display", "none")
                    $("#"+node.uid).css("display", "inherit")

                }

            })                                                                

           function FileTransfer(movingItem, destinationItem) {

                destinationItem.hasChildren = true;

                $.ajax({
                    url: "/DijitalArsiv/FileTransfer/",
                    data: { "movingItemID": movingItem.id, "movingPath": movingItem.path, "movingFileName": movingItem.text, "movingFileType": movingItem.spriteCssClass, "destinationItemID": destinationItem.id, "destinationPath": destinationItem.path, "destinationIsMainFolder": destinationItem.isMainFolder },
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    success: function (response) {
                        if (response.Status) {
                            movingItem.path = response.destinationPath;
                        } else {
                            getTreeView().dataSource.data(FirstData);
                            TreeView = JSON.parse(JSON.stringify(FirstData));
                        }
                    }
                }).fail(function (result) {

                });

            }

 

[Neli]

As far as I understand the issue is that when a node has been dropped it is not actually moved, but it is duplicated. Is this correct?

It is hard to suggest a possible reason for the observed issue as the provided sample is not runnable. The Dojo example linked here is using the version 2013.1.319 and loadOnDemand option is enabled, but as you will see such an issue is not replicated. May I ask you to modify the example in order to reproduce the behavior the way it is on your side and send it back to us? This way we could take a closer look and provide further assistance. 

Regards,

Neli

[cirilla]

First of all, thanks for your answer. I think you misunderstood the problem. My first problem is also present in the example you posted.  For example, put "Nancy Davolio" into the "Janet Leveling" node. Then click on the little arrow icon next to the "Janet Leveling" node. You will see the standby icon spinning forever. This issue is caused by the "Janet Leveling" node having "hasChildren=false" in the background. do "hasChildren = true" before assigning. This issue is being resolved. But this time, a copy of the dragged file is creating. I can't understand why. Initially I only get the first two nodes. I am getting the remaining nodes as a result of each request from the server. (I'm adding to the list on the server side on every request), I mean, loadOnDemond has no meaning to me.

 

[Nazım]

i have same issue. please help

[Neli]

Hi,

I will need a little bit more time to review the issue. I will get back to you once I have more information to share.

Thank you for your patience.

Regards,
Neli
Progress Telerik

[cirilla]

Greetings! Thank you and ı will be waiting for you impatiently.

[cirilla]

Same problem here.  .For example the 2017 version does not have this problem.

https://dojo.telerik.com/IgIJeRez/2

[Neli]

Hi,

Thank you for your patience. 

I am afraid I did not manage to find a workaround to the issue, thus I would suggest you upgrade to a newer version. Actually, the issue is not replicated in the next version after the one you are using. I understand that you do not want to upgrade to the latest as there could be big differences, but you could try the 2013.1.514 version. Here is a Dojo example with the mentioned version where you could test the behavior. 

Regards,
Neli
Progress Telerik