Some improvements suggestions

[devmondo]

hi, this is really cook and i am using it, thank you :)

but may i suggest some features

• ability to drag and drop
• lazy load children for performance
• check box integration -animation

thanks in advanced.

[eu81273]

Thank you for your suggesting improvements and additions to this module. :) I will keep in mind all your suggestions, and will try to apply your suggestions to this module as soon as I possibly can. Thank you once more.

[devmondo]

awesome man, cant wait for it, because i am depending on your directive now it is so small and clean :) all the best

[apesme]

Hi, it's a great component,

if you want to support IE10, you'll have to replace the last line in the js : html(null).append($compile with this : html("").append($compile

because, if you don't do that, there is 'null' that appears before each 'div' generated.

[DuncanFaulkner]

Hi,

this is awesome!

just one question, how do I go about selecting a tree node programmatically?

[apesme]

@DuncanFaulkner : you'll have to iterate over the treemodel to find the node you want, and do :

node.selected = 'selected'; $scope[treeId].currentNode = node;

Edit : if a node is already selected, you'll have to find this node and do node.selected = undefined; before doing the rest

[eu81273]

@laac : correct approach! @DuncanFaulkner : here is a sample.

//remove highlight from previous node
if( scope[treeId].currentNode && scope[treeId].currentNode.selected ) {
    scope[treeId].currentNode.selected = undefined;
}

//find the node to select
var node = findNode( treeModel, id);

//set highlight
node.selected = 'selected'

//set currentNode
$scope[treeId].currentNode = node;

//find node function
var findNode = function ( _children, _id, _result ) {
 
    for ( var i=0, child; child = _children[i]; i++ ) {
        if ( child.id === _id ) return child;
        else _result = findNode( child.children, _id ) || _result;
    }
 
    return _result;
}

[safiyu]

Its giving me an expanded view. But its better to display a collapsed view. That will be more user friendly.

[DuncanFaulkner]

When I used this control, I had one root item (firm), many locations, many contacts at each location. when I selected a location I collapsed all except the selected location this gave a better experience. when the root was selected all locations where collapsed.

I did have a lot of trouble trying to highlight a newly added item as this fired the watch and messed things up, I did mange to stop this but it was a bit of a hack.

very nice control

[eu81273]

@DuncanFaulkner : You're right. This module have no enough controlling functionality. I'm sorry. Now I have a plan that improvement of this control by using "service".

[DuncanFaulkner]

Yes, there are a few features that would help make this a really great control. for example having a status that can be set similar to the highlight feature, away of identifying parent and children (not sure how this would work), finding the selected item that's not in a watch or at least a way to identify where in the tree you are.

[trainerbill]

@safiyu I agree. Is there a way to initialize a collapsed view?

[trainerbill]

@safiyu I found a workaround. Probably not the best but it works. Change line 50 of angular.treeview.js to:

'<li data-ng-repeat="node in ' + treeModel + '" data-ng-init="node.collapsed=true">' +

[DuncanFaulkner]

Hi, I wanted a collapsed view as well, when building up my JSON object I add a name/value pair for collapsed with either true or false depending on the item selected (usually the location in my case), this way I didn't change the original source just in case it got overwritten by another developer after new released. Again this should be more accessible similar to the highlight function.

[DuncanFaulkner]

Something along the lines, (see below) this would be the data as populate from controller. $scope.treedata = [ { "label" : "User", "id" : "role1", "children" : [ { "label" : "subUser1", "id" : "role11", "children" : [] }, { "label" : "subUser2", "id" : "role12", "children" : [ { "label" : "subUser2-1", "id" : "role121", "children" : [ { "label" : "subUser2-1-1", "id" : "role1211", "children" : [] }, { "label" : "subUser2-1-2", "id" : "role1212", "children" : [] } ], "collapsed" : "true"} ]} ]}, { "label" : "Admin", "id" : "role2", "children" : [] }, { "label" : "Guest", "id" : "role3", "children" : [] } ];

[trainerbill]

@DuncanFaulkner does that work for the children nodes as well? I tried a similar workaround and it would only collapse the root folders.

[DuncanFaulkner]

Yes, most of the time I wanted the second level to be collapsed, apart from the selected item. In my example I only had one root node, but many 2nd and 3rd level nodes.

[safiyu]

@trainerbill and @DuncanFaulkner . I tried this and works excellent. And by the way I guess what you have suggested is a better option. Because, we insert collapse = true || false when clicking the icon. The method you have suggested inserts collapse field at the initial stage itself. This is the best and straight forward way of collapsing the tree view. Its better if someone adds this to the module.

[samiem41]

My requirement is to expand nodes at user provided levels, so what that means if i have a tree with like 5 levels. User can select level 3 from drop down which should ultimately expand the tree to 3rd level, also there would be a option to select even zero, which means entire tree should collapse with only head node being shown. Is this currently possible??

[DuncanFaulkner]

Hi, yes should be possible, from what I remember it doesn't do what you expect it to do, I think if you set an empty role with no child elements, I think you need to change the icon associated with it as it shows a child icon and not the top level icon. Been a while since I used the control and doing this from memory so may be wrong.

[adelima83]

How do you "pre select" a node.....

Lets say I kept on the database a saved (folder) location lets say ID = 2....

And once the tree is built and (done building) I want see that node selected... I am not sure how to approach this one.

I notice there is a nifty find function there, but im unsure how to do this operation once my tree view is loaded. Helps!

[adelima83]

Answering my own question..

node. whatever the property you want to compare it to, in this case i used label but in production i will be using an ID.

                        if (scope.node.label == "x") {

                            if (scope[treeId].currentNode && scope[treeId].currentNode.selected) {
                                scope[treeId].currentNode.selected = undefined;
                            }

                            scope.node.selected = 'selected';

                            //set currentNode
                            scope[treeId].currentNode = scope.node;
                        }

[sandeshds]

Is there any easier way of collapsing the root as well as all the children? , thought modifying the json is a way to go about it , i have a json structure which is deeply nested , and makes it difficult to insert the additional attribute at every level .

[adelima83]

I think by default it is collapsed.

However via code I think you have to iterate through the folders and find out which one is a parent of the other recursively...

Im still working on getting more done with this tree view, its a start but it really needs a lot of work to get it "FULLY" functional for your own design.

I am trying to get this tree view to respond to back and forward browser buttons. (Routing).

I was able to put a watch on the controller but the scope is actually on the directive, thus I still have some work to do in getting this working properly.

[adelima83]

I am making lots of changes to the original code, would eventually like to push these changes.

Some of the things I have accomplished so far: allowing different icons to be used, distinguishing folder with file not by child but by type, for example we can have one folder within another folder, cant assume the child because it is empty is in fact a file.

Also was able to tie in (routing) with the selection of the node.

Next thing I am working on is opening or closing folders depending on routing, thus when route changes and item is selected, open all parent folders to it so the user can see what was the selection, in addition, zone in or auto scroll to that spot.

So next order of business for me is being able to recursion from a child all the way to the parent and change the (collapsed state) to open, if not already opened.

I was also able to (pre select) a node on first load.

[DuncanFaulkner]

Hi, sounds like you have this sorted, I had taken a copy to see if I could improve things, I would really like to see you changes sometime.

[adelima83]

I am working on trying to get the parents folders expanded based on the selection of a node, instead of handling this via the (data)....

So lets say...

User clicks on a node that is nested within two folders. if he reloads the page i want the treeview to re render as i have some dynamic data that changes in the treeview. On selection of the node, i also want it to go to every parent folder of that node and expand it.

Not sure how easily i can accomplish but i will try my best.

In addition, lets say the user moves forward or back on the browser, and he collaped the folder where the selection would have been made. I need the parents to expand.

It seems that any watches i put on the directive itself is rendering per (node)..

I need to create a recursive functionality, or searching functionality. I saw one listed above il have to try it out. I couldn't to get it to work properly but will try my best.

[adelima83]

I love angularjs, Just accomplished making the parents folders expand based on routing.

Did not really require a recusive function, just a while loop.

Thats for selected folders. var currScope = scope; while (currScope.node.parent_location_id != null) { currScope.node.collapsed = false; currScope = currScope.$parent; //console.log(currScope.node); }

Thats for selected items... var currScope = scope.$parent; while (currScope.node.parent_location_id != null) { currScope.node.collapsed = false; currScope = currScope.$parent; }

[DuncanFaulkner]

looks good.

[adelima83]

actually.. forgot to add

var currScope = scope.$parent; while (currScope.node.parent_location_id != null) { currScope.node.collapsed = false; currScope = currScope.$parent; } currScope.node.collapsed = false;

at the end... because i also want to expand the main parent. :P

[srikanthrapolu]

how can i add a new node if the new node parent is given

[vedantsali]

How can i give control of expansion to the labels instead of nodeheads..

[adelima83]

Remove nodeheads from template. Change the ngclick to the label instead and voila.

[vedantsali]

I can not figure out when the tree is completely rendered in the dom. Can i have some $watch attached to it, so that i can call a function after the complete compilation?