How to highlight parent(s) of checked node

[Laurie]

I want to do something like what happens at http://demos.telerik.com/aspnet-mvc/treeview/checkboxes, where when you click a node, its parent nodes light up but are not checked. I've looked at the demo and can't figure out how to make this happen. Any ideas would be helpful.

It's the end of the day on Friday, so I don't really have time right now to come up with samples of my code. If no one has an idea by Monday, I will do that.

Thanks!

Laurie

[Laurie]

I'm unable to post an example without referencing my development site webapi, which I don't want to publish.  I'll open this as a ticket and will post the answer when I get it. 

Here's my code with the webapi url dummied out: Everything with the code is working as desired. My items are displaying, the currently selected node is clicked upon page load, and upon clicking a node, all other nodes are unclicked. The one thing I want to happen that isn't currently happening is that, when a lower-level node is clicked, its parent node(s) are highlighted in some way to indicate that there is a selected node under them.

<div>
    @(Html.Kendo().TreeView()
                    .Name("commodityTree")
            .Checkboxes(checkboxes => checkboxes
                        .Name("CommodityIds")
                .CheckChildren(false)
            )
                    .LoadOnDemand(false)
                    .DataTextField("name")
             .Events(events => events
                .Check("onCheck")
            )
                    .DataSource(dataSource => dataSource
                        .Model(model => model
                            .Id("id")
                            .HasChildren("hasChildren"))
                         .Read(read => read.Url("https://blahblah/API/TestAPI/GetCommodities")))
    )
</div>
<div style="padding-top: 2em;">
    <h4>Status</h4>
    <p id="result">No nodes checked.</p>
</div>
</div>
<script>

    // function that gathers IDs of checked nodes
    function checkedNodeIds(nodes, checkedNodes) {
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].checked) {
                checkedNodes.push(nodes[i].id);
            }

            if (nodes[i].hasChildren) {
                checkedNodeIds(nodes[i].children.view(), checkedNodes);
            }
        }
    }

    // show checked node IDs on datasource change
    function onCheck(e) {
        var dataItem = this.dataItem(e.node);

        var rootNodes = $("#commodityTree").getKendoTreeView().dataSource.data();

        traverse(rootNodes, function (node) {
            if (node != dataItem) {
                node.set("checked", false);
            }
        });
        var checkedNodes = [],
            treeView = $("#commodityTree").data("kendoTreeView"),
            message;

        checkedNodeIds(treeView.dataSource.view(), checkedNodes);

        if (checkedNodes.length > 0) {
            message = "IDs of checked nodes: " + checkedNodes.join(",");
        } else {
            message = "No nodes checked.";
        }

        $("#result").html(message);


    }
    function traverse(nodes, callback) {
        for (var i = 0; i < nodes.length; i++) {
            var node = nodes[i];
            var children = node.hasChildren && node.children.data();

            callback(node);

            if (children) {
                traverse(children, callback);
            }
        }
    }


</script>

[Ivan Danchev]

Hello Laurie,

I replied to your inquiry in the support thread you started. In order to avoid thread duplication I suggest we continue the discussion in it until the cause for the observed behavior and the expected result are clear. Any information that could be useful to the community we can then post in this forum thread.
 
Regards,
Ivan Danchev
Telerik by Progress

[Laurie]

After working on this with Ivan under a Support Ticker, we came to the conclusion that this cannot be done exactly as I want it done using the tri-state checkboxes (the three states being checked, unchecked, and the parent of a checked item/items). The specifics of my scenario are that only one checkbox can be checked at a time.  With the tri-state checkboxes, all items beneath a checked item are also checked. We were unable to find a way around this.

For us, this is a usability issue. I am using the treeView in an editing scenario where a single item within the tree may be selected and the editor can't tell at a glance which route the selected item falls under. I've displayed the name of the selected item and enabled Expand All | Collapse All buttons to mitigate the issue, but the ideal solution would have been to mark the parent items in some way so that the path was apparent. I may try just expanding the path leading to the selected item, but for now I'll let it sit.

[Dharmangi]

Is this issue addressed now!

 

Can I highlight all the parent of child node which is selected / updated?

[Ivan Danchev]

There has been no changes with regard to the tri-state checkboxes functionality discussed in this ticket. With this functionality enabled, the parent node indicates that a child node has been checked by displaying "-" in the parent checkbox. When all child nodes of a parent are checked, the parent node's checkbox is also checked automatically. See this demo, which demonstrates how tri-state checkboxes work: https://demos.telerik.com/aspnet-mvc/treeview/checkboxes

Apart from the tri-state checkboxes, no other form of highlighting all the nodes up in the hierarchy of the TreeView has been implemented.