Umbraco 7 - Highlighting selected items in custom tree

Custom Tree elements are fairly straight forward using the “umb-tree” directive.

If you want to highlight selected nodes in a custom tree the same way as they are in the main content tree, you’ll have to use the “treeNodeSelect” event in your controller.

Custom Tree Directive

?

1 2	<umb-tree application="CustomApp" eventhandler="dialogTreeEventHandler" hideheader="true" hideoptions="true" isdialog="true" section="CustomSection" treealias="CustomTreeAlias"> </umb-tree>

Controller

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

function DialogControllerFunction($scope, dialogService, eventsService, navigationService, appState, treeService) {     var dialogOptions = $scope.dialogOptions;     var node = dialogOptions.currentNode;       $scope.dialogTreeEventHandler = $({});         $scope.dialogTreeEventHandler.bind("treeNodeSelect", function (ev, args) {         args.event.preventDefault();         args.event.stopPropagation();           var _selectedNode = args.node;         var _treeRootElement = $(args.event.currentTarget).closest(".umb-tree");           //Clear previously selected items (remove if you want to select multiple)         //  iterate through each child element in the current tree         _treeRootElement.find("li[tree='child']").each(function () {             $(this).scope().currentNode = null;         })           //this will highlight the current node         args.element.currentNode = _selectedNode;     });   } angular.module("umbraco").controller("CustomApp.Namespace.DialogController", DialogControllerFunction);

In this example, my custom tree is a navigation dialog: