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 })
    }
  });

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

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?

args.element.currentNode = args.node;

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

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
        });
    }
});

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?

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.

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}); 

is working on a reply...