Hi guys

I have a treeview which has some rules about the exact location that certain nodes can be dragged to.

I have been working through the logic and getting there, except I cam across this challenge

If I have 3 nodes and the same level and drag a new node between them

Node1

   drag position a

Node2

drag position b

Node3

It appears that if the mouse is closets to Node2  at both drag position A and B, I can get the same drag events.

To be clear, dropTarget = 'Node2' and status is  'i-insert-middle' can happen at both Drag A and Drag B  if the mouse is closest to Node2.

I think easiest demonstrated in this simple Dojo  I have filtered out all events other than target for the second node and insert middle events.

drag and drop drag events

Dragging on each side of the second node can give the same drag events  as per attached screen shots which show the same events for the different locations. of the drag

How can I determine where the exact location the user is dragging to? ( before they do it , so I can deny or allow)

Many thanks

Rob

Hey all I need a hand here. I've been at this for a few hours now and I just can't find how this code is bringing back the old value(s).

    const onCheck = (e) => {
        let listBox = $("#Sources").data("kendoListBox"),
            treeView = $("#availableSources").data("kendoTreeView"),
            selection = [],
            getSelection = (items) => {
                items.forEach(item => {
                    if (item.hasChildren) {
                        getSelection(item.items);
                    } else if (item.checked) {
                        selection.push(item);
                    }
                });
            };

        if (e.node.attributes[3].value == "false") {
            listBox.remove(listBox.items());
            $("#Sources option[value='" + listBox.dataSource._data[0].value + "']").remove();
            //selection.pop(listBox.dataSource._data[0]);
        } else {
            getSelection(treeView.dataSource.data());

            if (selection.length) {
                selection.forEach(item => {
                    listBox.add({
                        text: item.text,
                        value: item.id
                    });
                });
            }
        }
    }

As an example say I checked the item Github and it places it into the listbox just fine. It also adds the ID of the item to the hidden select component.

Now say I uncheck that item now:

Great! It removed the item from the listbox and also from the hidden select component. However though, when I chose another item, say GitHubIssues I am presented with not only that item in the listbox but the pervious item is placed into the select component.

It has the correct item in the listbox but I am unsure as to why its keeping the previous value(s)?

I overwrote the FileManagers MoveCommand to implement my own logic. Afterwards I do call the FileManagers refresh method. Unfortunately, this seems to update only the ListView/GridView, but not the TreeView.

So, when I move a subfolder between two folders, the folder has been moved correctly, the GridView/ListView then refreshes perfectly, but in the TreeView I can still see the subfolder in the old location  (source folder). If I click the TreeViews target folder, the moved subfolder occurs. When I click the TreeViews source folder, the subfolder is still there (although it should not).

How can I force the FileManagers TreeView to do a full refresh (and reload all data)?

Thanks for any advice!

Patrick

Hey all I am trying to find the correct way to order/sort my child names in order from A-Z.

Currently my treeview looks like this:

And this is how I would like to sort it:

The data is coming in via JSON like so (using the above example):

[{
        "Name": "AU",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Academic",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "Gitlab",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Code Repos",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "B",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Dating",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "GitHubCommits",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Code Repos",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "GitHub",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Code Repos",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "Re",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Academic",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "Ir",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Dating",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "Ru",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Academic",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "LoveA",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Dating",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "LoveH",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Dating",
        "Icon": null,
        "ProviderId": 2
    },.........
]

Note that the JSON above does not come in any type of order. The Category names themselves are in order by me doing this:

dataSource: {
   data: resultData,
   schema: {
       model: {
          children: 'items'
       },
       parse: (data) => {
          let newData = [];

           //Re-order catagory names A-Z
           data.sort((a, b) => (a.Category > b.Category) ? 1 : -1);
....

The rest of the above code looks like this::

           data.forEach(item => {
              let parent = newData.find(parentItem => parentItem.text === item.Category);

              if (!parent) {
                 //The beginning of the tree category
                 parent = {
                     id: 2,
                     text: item.Category,
                     expanded: true,
                     items: [],
                     imageUrl: "" + item.Icon + ""
                 };

                 newData.push(parent);
              }

              parent.items.push({
                 //Each "child" under the above category
                 id: 3,
                 text: item.Name,
                 imageUrl: "" + item.Icon + ""
              });
           });

           return [{
              id: 1,
              text: 'Categories',
              expanded: true,
              items: newData
           }];
       }
   }
 }
});

How would I, using the code above, sort also the child items under each category name?

I've tried already adding this to the code:

sort: {
   field: "Name", 
   dir: "asc"}

All I am using is treeview -

works fine with kendo.all.min.js (locally and CDN) but that is 3+Mb and slows down my page load

when I only use kendo.treeview.min.js  I get " TypeError: window.kendo is undefined"

What are the min js files needed

I have Index.shtml with Grid control:

 Controller have _Read method

Details.shtml Custom PopUP template as simple as possible (I remove from this template all other markup except treeview )

When I run it - I got the grid , Edit click Open Popup with Treeview , but Checkboxes behavior is weird - click on any one checkbox Select All or Clead All checkboxes on the screen

When I move Treeview from Popup template on Index.shtml page it's working as expected. Please advise. 

Hello. 

I modifed an example from demo. To add one child node to selected node.

https://dojo.telerik.com/uhUnukOJ/3

Left side is copy from demo, right side other simple version.

Right side add only to the root. And left side works strange.

Second. I have config a hierarhicalDataSource

var treeData = new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                    url: "api/ui/UIData/folders",
                    contentType: "application/json",
                    dataType: "json",
                    data:
                        {
                            id_hierarchy: 1
                        }
                }              ,
             

                requestEnd: function (e)
                {
                    //check the "response" argument to skip the local operations
                    console.log(e);
                }
            }
        });

It loads root nodes. But does not show any children nodes after loading. requestEnd does not fire too.

I need to refresh the whole treeview and I found on forums that to do that is to call .dataSource.read() method. However when I call this method the user does not see that the treeview is loading and he still sees the old data.

How to refresh the treeview and display the loading animation just like when the treeview is loaded for the first time?

Hello Everyone,

I am trying to build a kendo tree view with remote data  getting from the controller. I want to display a Image (attachment) at a certain node . How do I do that.?

Following is my data from the controller.

In the attached files, I have uploaded, I want to show the image at the arrow highlighted

Also. k-icon k-i-collapse is not showing at "Project Metrics" node even when the node is expanded.

 var result = new List<HierarchicalViewModel>()
            {


                new HierarchicalViewModel() { ID = 1, ParendID = null, HasChildren = true, Name = "Program Structure" },
               new HierarchicalViewModel() { ID = 3, ParendID = null, HasChildren = true, Name = "Project Metrics" },
                new HierarchicalViewModel() { ID = 2, ParendID = 1, HasChildren = true, Name = "Program Structure" },
            
                new HierarchicalViewModel() { ID = 4, ParendID = 3, HasChildren = true, Name = "Project Metrics" },
                new HierarchicalViewModel() { ID = 5, ParendID = 2, HasChildren = false, Name = "State" },
                new HierarchicalViewModel() { ID = 6, ParendID = 2, HasChildren = false, Name = "Executive Summary" },
                 new HierarchicalViewModel() { ID = 7, ParendID = 2, HasChildren = false, Name = "Reporting period for RHGCP funding" },
                new HierarchicalViewModel() { ID = 8, ParendID = 2, HasChildren = false, Name = "Describe how funds are distributed and administrated in the State" },
                new HierarchicalViewModel() { ID = 9, ParendID = 2, HasChildren = false, Name = "Describe the method(s) used for project selection" },
                new HierarchicalViewModel() { ID = 10, ParendID = 2, HasChildren = false, Name = "Describe the method(s) used to measure effectivenss of the projects and programs" },
                new HierarchicalViewModel() { ID = 11, ParendID = 2, HasChildren = false, Name = "Describe any noteworthy efforts the State has used to effectively deliver a successful program" },
               new HierarchicalViewModel() { ID = 12, ParendID = 2, HasChildren = false, Name = "Describe the status of data acquistion and analysis efforts" },
                new HierarchicalViewModel() { ID = 13, ParendID = 2, HasChildren = false, Name = "Add number of crossings" },
                new HierarchicalViewModel() { ID = 14, ParendID = 2, HasChildren = false, Name = "Provide program emphasis areas" },
                new HierarchicalViewModel() { ID = 15, ParendID = 2, HasChildren = false, Name = "Describe Section 130 program effectiveness" },
                new HierarchicalViewModel() { ID = 16, ParendID = 2, HasChildren = false, Name = "Input performance measures" },
                new HierarchicalViewModel() { ID = 17, ParendID = 3, HasChildren = false, Name = "Project Listing" },
                new HierarchicalViewModel() { ID = 18, ParendID = 3, HasChildren = false, Name = "Crash Data Statistics" }
            };

            return result;

//Kendo Tree View

 @(Html.Kendo().TreeView()
                                                .Name("treeview")
                                                .DataTextField("Name")
                                                 .Checkboxes(true)
                                                .DataSource(dataSource => dataSource
                                                .Read(read => read
                                                    .Action("Read_TreeViewData", "Questions")
                                                    )
                                                )
                                                .Events(ev => ev.Select("onTreeViewselectNode")
                                                .Check("onCheck")
                                                )
                                            )

<script>
                                    function onTreeViewselectNode(e) {
                                        var dataItem = e.sender.dataItem(e.node);
                                        console.log(dataItem);
                                    }

                                    function onCheck(e) {
                                        console.log("Checkbox changed :: " + this.text(e.node));
                                        var checkedNodes = [],
                                            treeView = $("#treeview").data("kendoTreeView"),
                                            message;

                                        checkedNodeIds(treeView.dataSource.view(), checkedNodes);

                                        if (checkedNodes.length > 0) {
                                            message = "IDs of checked nodes: " + checkedNodes.join(",");
                                        } else {
                                            message = "No nodes checked.";
                                        }

                                        $("#result").html(message);

                                    }

                                    function checkedNodeIds(nodes, checkedNodes) {
                                        for (var i = 0; i < nodes.length; i++) {
                                            if (nodes[i].checked) {
                                                checkedNodes.push(nodes[i].id);
                                            }

                                            if (nodes[i].hasChildren) {
                                                checkedNodeIds(nodes[i].children.view(), checkedNodes);
                                            }
                                        }
                                    }

                                </script>

Hi, I follow the documentation about un-selecting an item in a treeview, like this: 

ktv.select($());

After, if I call ".select()", there's no node returned.  And, if I search for k-node-selected", there's also none.

BUT

the node with id "(id-of-treeview)_tv_active" is still there.  And, because we used it for some query, we got errors.

When we create a treeview from a div called <div id="test"></div>

The selected node gets its ID set to id="test_tv_active".

First, I don't think you should use an "id" for that.

And, you can fix the "unselect" by also removing the id from that item when we un-select it.