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

Controller

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: