Some improvements suggestions about angular.treeview HOT 33 OPEN

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.

from angular.treeview.

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

from angular.treeview.

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.

from angular.treeview.

Hi,

this is awesome!

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

from angular.treeview.

@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

from angular.treeview.

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

from angular.treeview.

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

from angular.treeview.

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

from angular.treeview.

@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".

from angular.treeview.

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.

from angular.treeview.

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

from angular.treeview.

@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">' +

from angular.treeview.

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.

from angular.treeview.

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" : [] }
];

from angular.treeview.

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

from angular.treeview.

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.

from angular.treeview.

@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.

from angular.treeview.

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??

from angular.treeview.

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.

from angular.treeview.

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!

from angular.treeview.

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

from angular.treeview.

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 .

from angular.treeview.

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.

from angular.treeview.

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.

from angular.treeview.

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.

from angular.treeview.

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.

from angular.treeview.

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

from angular.treeview.

looks good.

from angular.treeview.

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

from angular.treeview.

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

from angular.treeview.

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

from angular.treeview.

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

from angular.treeview.

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?

from angular.treeview.