How to highlight parent(s) of checked node

4 posts, 0 answers
  1. Laurie
    Laurie avatar
    141 posts
    Member since:
    Feb 2007

    Posted 22 Jul Link to this post

    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

  2. Laurie
    Laurie avatar
    141 posts
    Member since:
    Feb 2007

    Posted 25 Jul Link to this post

    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>

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    837 posts

    Posted 26 Jul Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Laurie
    Laurie avatar
    141 posts
    Member since:
    Feb 2007

    Posted 05 Aug in reply to Ivan Danchev Link to this post

    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.

Back to Top
UI for ASP.NET MVC is VS 2017 Ready