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 pleteness, 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?

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 pleteness, 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?

• javascript
• kendo-ui
• telerik-mvc
• kendo-treeview

Share Improve this question Follow edited Mar 10, 2015 at 10:23 Lars Höppner 18.4k22 gold badges4747 silver badges7373 bronze badges asked Mar 9, 2015 at 15:31 Stuart HemmingStuart Hemming 1,67333 gold badges2424 silver badges5151 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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)

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.