Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Robert Mulder 79 posts 272 karma points c-trib
    Mar 05, 2014 @ 12:19
    Robert Mulder
    0

    Make selected node in custom tree appear selected

    I have a (hopefully) simple question

    I've created a new Section with tree as described here http://umbraco.github.io/Belle/#/tutorials/Creating-Editors-Trees and here http://www.enkelmedia.se/blogg/2013/11/22/creating-custom-sections-in-umbraco-7-part-1.aspx

    This is all working very well. The only thing I noticed is when I select an item in my tree the content area properly loads the control, but the item does not appear selected in the tree as it does in the other sections.

    What do I need to do to make the selected tree item appear selected (blue)?

    Thanks in advance.

  • Jesper Nielsen 141 posts 498 karma points
    Apr 01, 2014 @ 16:02
    Jesper Nielsen
    1

    Hi Robert,

    I don't think there is any official way of getting the selected tree item to appear selected. :-(

    But there is a hack'a'licious way of getting it done! :-D

    You need to inject this little piece of javascript into the main Umbraco page:

      angular.element("#tree").scope().treeEventHandler.bind("treeNodeSelect", function(ev, args) {
        var n = args.node;
        if (n.section == "YourSectionName") {
          angular.element("#tree .root ul").first().children().each(function() { $(this).scope().currentNode = n })
        }
      });
    What it does, is adding an event handler to the main tree, reacting on the "treeNodeSelect" event.
    When the event occurs, and the node selected is one of your own nodes, as specified by the section name, it goes through the angular scopes for the displayed tree, and sets the "currentNode" property.
    Angular does the rest.
    If your tree was a "true" legacy tree, you could inject the script through the RenderJs(StringBuilder javascript) method. (And in that case, you would need to wrap the script in a timeout function of say 500 ms, to allow the page to setup, before adding the event handler.)
    But I guess you need to find some other way of injecting it. :-S
    Caveat Emptor!
    This "hack" will basically bypass the Umbraco code that is not setting the selected node property. So far I have not seen any ill effects of this, but there are no guarantees! Use at you own peril!
    Kind regards,
    Jesper
  • Tim 1193 posts 2675 karma points MVP 3x c-trib
    May 21, 2014 @ 13:58
    Tim
    105

    I found a slightly less hacky way of doing this, in my edit controller js file, I sync the tree on edit, which also sets the selected node:

    navigationService.syncTree({ tree: 'YOUR TREE NAME', path: ["-1", "MORE IDS HERE"], forceReload: false });
    

    That seems to update the selected node, and it looks like the built in edit controllers do something similar.

    Hope that helps!

  • john blair 48 posts 219 karma points
    Jul 30, 2019 @ 16:06
    john blair
    0

    "MORE IDS HERE" - i wasn't sure what this meant - then realized this is the id parameter in the CreateTreeNode method in the TreeController. You may need multiple ids if the node you want to highlight is multiple levels down. Thanks.

  • Robert Mulder 79 posts 272 karma points c-trib
    May 22, 2014 @ 09:22
    Robert Mulder
    0

    Thanks Tim, I'm currently using exactly that technique to get the item to appear selected and it works great.

  • Tim 1193 posts 2675 karma points MVP 3x c-trib
    Aug 04, 2014 @ 12:05
    Tim
    0

    Jesper, where do you put the code that you use? If I try and use that, it doesn't work because the tree isn't loaded yet. Is there somewhere specific that it needs to go to work?

  • Alan Donnelly 2 posts 55 karma points
    Aug 28, 2014 @ 14:41
    Alan Donnelly
    0
    args.element.currentNode = args.node;
    

    This worked for me, it highlights the selected node, theres a bit more detail here

  • Daniel Bardi 927 posts 2562 karma points
    Jun 17, 2015 @ 09:42
    Daniel Bardi
    1

    This worked for me.

    I needed to build out the path array to sync nested items.

    You should be able to copy/paste this code into a controller without any changes.

    eventsService.on('appState.treeState.changed', function(event, args) {
        if (args.key === 'selectedNode') {
    
            function buildPath(node, path) {
                path.push(node.id);
                if (node.id === '-1') return path.reverse();
                var parent = node.parent();
                if (parent === undefined) return path;
                return buildPath(parent, path);
            }
    
            event.currentScope.nav.syncTree({
                tree: $routeParams.tree,
                path: buildPath(args.value, []),
                forceReload: false
            });
        }
    });
    
  • john blair 48 posts 219 karma points
    Jul 30, 2019 @ 16:08
    john blair
    0

    Like the idea of this - but chrome console gave odd error tree cannot be null - so rather than research it i used the solution navigationService.syncTree - no errors.

  • Streety 358 posts 568 karma points
    Jan 23, 2018 @ 09:47
    Streety
    0

    I this is an Old post but I am getting the same issue.

    I am running 7.7.7 with two custom trees in a custom section

    Selecting a node correctly connects to the routes and the right html shows up just fine. However the "selectedNode css is not being assigned.

    The CSS class doing the work is:

    .umb-tree div.selected, .umb-tree li.current>div {
    background: #00aea2;}
    

    However, when I sync my tree the class is written to the node and the new item is selected.

    But selecting another node doesn't deactivate/activate the css class.

    Angular has a ng-class="getNodeCssClass(node)" block on the div which may be setting the class. Dunno.

    It looks to me like a simple bit of JS NOT being propagated to the custom section.

    Are there standard Umbraco JS libraries I need to include in my manifest file for the project?

    Has anyone got this going?

  • Streety 358 posts 568 karma points
    Jan 23, 2018 @ 10:47
    Streety
    0

    OK a bit more digging.

    I don't think the class "selected" is being dynamically assigned to the tree node on click event.

    Any ideas how one would do this? I tried using jQuery the old fashioned way but the click event did not fire.

    Not sure how Umbraco is wired up with Angular.

  • Brendan Rice 537 posts 1098 karma points
    Oct 01, 2020 @ 23:06
    Brendan Rice
    0

    Darren I ran into the same issue, the fix I came up with was to not set the node to active. See code below:

    // get the seleected node in the tree (include the appState, treeService in the DI for the controller)
    var activeNode = appState.getTreeState('selectedNode');
    var activeNodePath = treeService.getPath(activeNode);
    
    navigationService.syncTree({
        tree: 'adTypeCategory',
        path: activeNodePath,
        forceReload: true, 
        activate: false}); 
    
Please Sign in or register to post replies

Write your reply to:

Draft