Checking if a treeview item has children

4 posts, 1 answers
  1. Jeffrey
    Jeffrey avatar
    13 posts
    Member since:
    Sep 2016

    Posted 22 Jun Link to this post

    Hi Kendo UI Team!

     

    I'm trying to figure out how to determine whether or not a node that I find by text has any children nodes.

    let's say I have a treeview where two of its' nodes are both named "AAA".  However, one node has children nodes of its own whereas the other does not.

    If I then try the following:

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

    var matches = treeview.findByText("AAA");

    then my "matches" variable will contain a jQuery object that contains both nodes.  From here, how can I identify which of those two nodes specified by the jquery object is the one with no children?  My goal is to check the checkbox of the node with no children nodes of its own.  Essentially, I would like the line below to work, but right now I am not sure how to look at the matches object to find the correct "NoChildNodesIndex" variable I would use below:

    treeview.dataItem(matches[NoChildNodesIndex]).set("checked", true);

     

    Best,

    Jeff

  2. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    1268 posts

    Posted 23 Jun Link to this post

    Hi Jeff,

    Here's an example showing how you can check whether a node contains child nodes and check it if it doesn't:
    <div id="treeview"></div>
    <script>
    var items = [
      { ProductName: "Tea", items: [
        { ProductName: "Green Tea" },
        { ProductName: "Black Tea" }
      ] },
      { ProductName: "Tea" }
    ];
    $("#treeview").kendoTreeView({
      dataTextField: "ProductName",
      dataSource: items,
      checkboxes: true
    });
       
    var treeview = $("#treeview").data("kendoTreeView");
    var matches = treeview.findByText("Tea");
    for(i = 0; i < matches.length; i++) {
      var dataItem = treeview.dataItem(matches[i]);
      if(!dataItem.hasChildren) {
        treeview.dataItem(matches[i]).set("checked", true);
      }
    }
    </script>


    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jeffrey
    Jeffrey avatar
    13 posts
    Member since:
    Sep 2016

    Posted 23 Jun in reply to Ivan Danchev Link to this post

    thank you Ivan, this was perfect.

     

    the treeview.dataItem call was exactly what was missing in my understandinf of using kendo's treeviews the way I wanted.  many thanks!

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1268 posts

    Posted 26 Jun Link to this post

    Hi Jeff,

    I am glad the suggested approach worked out. You can find more information on the dataItem method and the parameters it accepts in the TreeView's API documentation.

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top