This is a migrated thread and some comments may be shown as answers.

Accessing the Child Nodes of a Selected Node

2 Answers 1337 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Stuart Hemming
Top achievements
Rank 2
Stuart Hemming asked on 09 Mar 2015, 03:26 PM
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?









2 Answers, 1 is accepted

Sort by
0
Stuart Hemming
Top achievements
Rank 2
answered on 10 Mar 2015, 03:46 PM
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.
0
Alex Gyoshev
Telerik team
answered on 11 Mar 2015, 09:46 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
TreeView
Asked by
Stuart Hemming
Top achievements
Rank 2
Answers by
Stuart Hemming
Top achievements
Rank 2
Alex Gyoshev
Telerik team
Share this question
or