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

3 Answers 44 Views
TreeView
cirilla
Top achievements
Rank 1
cirilla asked on 25 Nov 2021, 02:35 PM | edited on 26 Nov 2021, 11:50 AM

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
Telerik team
commented on 30 Nov 2021, 10:06 AM

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
Top achievements
Rank 1
commented on 01 Dec 2021, 09:34 PM

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.

 

3 Answers, 1 is accepted

Sort by
0
Nazım
Top achievements
Rank 1
Iron
answered on 03 Dec 2021, 08:13 AM
i have same issue. please help
0
Neli
Telerik team
answered on 06 Dec 2021, 02:59 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

cirilla
Top achievements
Rank 1
commented on 06 Dec 2021, 03:22 PM

Greetings! Thank you and ı will be waiting for you impatiently.
cirilla
Top achievements
Rank 1
commented on 09 Dec 2021, 06:22 AM | edited

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

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

0
Neli
Telerik team
answered on 09 Dec 2021, 11:35 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
TreeView
Asked by
cirilla
Top achievements
Rank 1
Answers by
Nazım
Top achievements
Rank 1
Iron
Neli
Telerik team
Share this question
or