Accessing the Child Nodes of a Selected Node

[Stuart Hemming]

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?

[Stuart Hemming]

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.

[Alex Gyoshev]

Hello Stuart,

On the client-side, you can use the children field of the dataItem to access child datasources, which contain child nodes:

var item = treeview.dataItem(e.node);
if (item.hasChildren) {
   // child data is located in item.children.data();
}

Be aware that mixing remote loading and loadOnDemand: false may trigger multiple requests for each level of unloaded data. It is best if you choose where you need to process the nodes -- either load them all on the client-side, or process the selected node on the server.

Regards,
Alex Gyoshev
Telerik