CODEWITHSUNDEEP
jquerykendo-uikendo-treeview
Lieutenant Dan
Lieutenant Dan

Reputation: 8274

iterate through all dataItems (all kendo ui treeview nodes)

I am trying to simply loop through all my nodes in a kendo ui treeview.

Current GetNodes() is returning not a function.. how can I access that list?

I have also tried .get_allNodes(); - tree is accurate, just don't where to iterate trough current nodes.

let tv = $("#tree").data("kendoTreeView");

 let nodes = tv.GetNodes();
    console.log(nodes);
    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].get_nodes() != null) {
          console.log(nodes[i]);

            let item = tv.dataItem(nodes[i]);
            console.log(item);

            let hasChildren = item.hasChildren;    
            console.log(hasChildren);
  
            if (hasChildren = false){
              tv.remove(item);
            }
        }
    }

my consoled treeview i see this...

enter image description here

Upvotes: 0

Views: 1797

Answers (1)

Baro
Baro

Reputation: 5520

I didn't know Kendo at all, so I read the documentation and hope it will help you.

I recreated a minimal example via the documentation and it works. I read the datasource with all its children recursively.

$(document).ready(function() {
    $("#treeView").kendoTreeView({
        dataSource: [
            {
                text: "Item 1",
                items: [
                    { text: "Item 1.1" },
                    { text: "Item 1.2" }
                ]
            },
            { text: "Item 2" }
        ]
    });
    
    
    var treeView = $("#treeView").data("kendoTreeView");
     
    function recursiveReading(nodes) {
      for (var i = 0; i < nodes.length; i++) {
        console.log(nodes[i].text);

        if (nodes[i].hasChildren)
          recursiveReading(nodes[i].children.view());

      }
    }

    recursiveReading(treeView.dataSource.view());
    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.common.min.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2020.3.915/js/kendo.all.min.js"></script>


<ul id="treeView">

</ul>

Upvotes: 2

Related Questions