Accessing the Child Nodes of a Selected Node

3 posts, 0 answers
  1. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 09 Mar 2015 Link to this post

    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. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 10 Mar 2015 in reply to Stuart Hemming Link to this post

    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.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 11 Mar 2015 Link to this post

    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.

     
Back to Top