Accessing the Child Nodes of a Selected Kendo TreeView Node

Question

I have an Ajax populated treeview....

@(Html.Kendo().TreeView()
    .Name("fao")
    .HtmlAttributes(new {@class="fixed-height" })
    .DataTextField("Text")
    .TemplateId("treeview-item-template")
    .DataSource(ds => ds
        .Read(r => r
            .Action("_ModuleData", "Home")
        )
        .Model(m => m
            .Children("Items")
            .HasChildren("HasChildren")
        )
    )
)

I have a requirement to update some data hidden against each child item - in the template - when a action (triggered outside of the control) occurs.

The template, for completeness, looks like this ...

<script id="treeview-item-template" type="text/kendo-ui-template">
    #= item.Text #<input type='hidden' class='hidden-data' data-fal='#= item.Fal#' data-uid='#=item.uid#'/>
</script>

Now, I have code for the trigger and that works just fine.

I have code to update the hidden data. Again. No worries.

What I can't figure out is how to simply get at all of the child (and granchild, etc) nodes of the node that is selected when the trigger fires.

If I were trying to get at the children when the node was initially clicked, I kind of expected to be able to say something like...

function doSomething(e)
{
    for(n=0; n<e.node.nodes.length; n++)
    {
        doSomethingElse(e.node.nodes[n]);
    }
}

But no such functionality seems to exist.

Does anyone have any suggestions how I might go about this?

score 6 · Answer 1 · answered Mar 10 '15 at 10:22

You can access the children via the model which you can get from the DOM node:

var dataItem = e.sender.dataItem(e.node);
if (dataItem.hasChildren) {
    var children = dataItem.children.data();
}

This will only get you direct children, so you'd have to make it recursive to get all descendants.

(demo)

score 4 · Accepted Answer · answered Mar 10 '15 at 15:43

OK.

It seems I can get at all of the nodes on the TreeView like this ...

var allNodes = $(".k-item");

Likewise, I can get at all of the child nodes of a given node like this ...

// node is the node under which we need all of the child nodes
var childNodes = $(".k-item", node);

And, for any given node, I can get the dataItem like this ...

var dataItem = tree.dataItem(node);

I believe that all of the above only holds if the data for all of the child nodes below the selected node have been loaded. In my case, I'm loading from remote data (using AJAX) but I have .LoadOnDemand(false) in the definition of my grid.

Accessing the Child Nodes of a Selected Kendo TreeView Node

2 Answers2