Telerik Forums
Kendo UI for jQuery Forum
0 answers
62 views

 

I was configuration a directory in a directory by used File Manager.

 

After that whenever click the sub directory, parent directory move to left (created 'k-treeview-toggle').

 

What's that?

 

DEMO: multiple click the 'folder2' 

https://dojo.telerik.com/@handcake/EJucAmOF

jang
Top achievements
Rank 1
 updated question on 04 Feb 2022
1 answer
115 views

Hi ,

Need to check programmatically (based on condition) level 3 (grand child) or more (gran grand child) nodes.

I am able to check till level 2. But can you help me to check the nodes when we have nodes in more that 2 levels.

The following code works up to 2 level:

 

 var treeview = $("#treeview").data("kendoTreeView");
    var myNodes = treeview.dataSource.view();
    var dataSource = treeview.dataSource;

 

    for (var i = 0; i < nodes.length; i++) {

            for (var j = 0; j < nodes[i].items.length; j++) {

                if (nodes[i].items[j].ischecked == true) {



                    for (var k = 0; k < myNodes.length; k++) {
                        myNodes[k].load();
                        if (myNodes[k].hasChildren) {
                     
                            var children = myNodes[k].children.view();
                           
                            if (children) {

                                for (var l = 0; l < children.length; l++) {
                                    if (children[l].id === nodes[i].items[j].id) {
                                        children[l].set("checked", true);

                             
                                        var dataItem = dataSource.get(nodes[i].id);
                                        var node = treeview.findByUid(dataItem.uid);
                                        treeview.expand(node);
                                    }
                                }
                            }
                        }

                    }
                }
            }

        }
Neli
Telerik team
 answered on 03 Feb 2022
1 answer
456 views

Hello,

We try load ~3-4000 treenodes to treeview but it is very slow. Building the treeview after the datasource is available is ~2 minutes.

The database query duration is few seconds.

Our code:


            $("#tvFormulaTree").kendoTreeView({
                template: "#if (item.Clickable) {# <a id='" + "#=item.id#" + "' onclick='handleFormulaTreeViewDblClick(\"" + "#=item.FullPathName#" + "\"" + ");' >#=item.Name#</a> #} else {# #=item.Name# #}#",
                name: 'tvFormulaTree',
                dataTextField: "Name",
                dataSource: dsFormula,
                loadOnDemand: false
            });
 
 
 
    var dsFormula = new kendo.data.HierarchicalDataSource({
        transport: {
            read: function (options) {
                $.ajax({
                    type: "POST",
                    url: '@Url.Content("~/DD/GetFilteredTreeDataAsync")',
                    dataType: 'json',
                    traditional: true,
                    contentType: "application/json; charset=utf-8",
                    success: function (result) {
 
                        options.success(result);
                    }
                });
            }
        },
        schema: {
            model: {
                id: "id",
                children: "Children"
            }
        }
    });
 

Can you help please, how can we speed-up this?

Thank you!

Ianko
Telerik team
 answered on 16 Dec 2021
2 answers
398 views

Hello,

I'm new here and I'm trying to figure out how can I drag and drop from a Grid to a TreeView

I found this example http://dojo.telerik.com/eWIgu/2

It's something like this what I want to do, but in the example I can't put an element in a certain node of the TreeView, I just add elements to the data source. So how can I do that? I need your help

 

PS. I also want to do this with a listbox instead of a grid. That's possible?

  
Neli
Telerik team
 answered on 15 Dec 2021
3 answers
90 views

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
 answered on 09 Dec 2021
1 answer
435 views

Hi,

I am currently integrating the Tree View & context menu in Kendo UI Jquery. I would need to show different set of context menus for different category. Is there a way to do it? For 1st & 2nd level will be different context menu. 3rd level will not have any context menu.

 

Thanks in advance.

Neli
Telerik team
 answered on 09 Dec 2021
0 answers
73 views

Hello,

 

I'm my angular app I'm trying to achieve drag and drop from treeview to grid.

I have on the sidebar a list of items in a treeview and what to drag them to the grid. Even if this feature is not provided out-of-the-box, I could implement it if I had on the drop event, the id of the dragged item and the position where it is dropped.

 

Is this possible?

 

Thanks in advance

Luis
Top achievements
Rank 1
 asked on 18 Oct 2021
1 answer
65 views
Is the capability there for the Treeview control to bind to a network share location (\\server\sharedfolder\subfolder), and then be able to make a selection and return the filename to be passed to another operation? 
Ianko
Telerik team
 answered on 12 Oct 2021
2 answers
121 views

Hi,

I did update project ExampleCSVS2010 to new version of Kendo Windows ver. 2021.3.914 
After update I got error for class "ExamplesForm":
The type or namespace name  "ExamplesForm" could not 
be found (are you missing a using directive or an assembly ....)

Thanks,

Leonid

n/a
Top achievements
Rank 1
Iron
 answered on 05 Oct 2021
1 answer
245 views

I am trying to disable the drag/drop within the treeview (as in the user wont be able to move any items anywhere inside the treeview). However I am not coming up with a solution for this issue.

I still want the user to be able to drag/drop an item that's inside the treeview over to my listview box as well as drag/drop it back to the treeview box.

So is it possible to disable the drag/drop feature inside the treeview when keeping the drag/drop from there to my listbox?

Neli
Telerik team
 answered on 28 Jul 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?