thienhung1989 / angular-tree-dnd Goto Github PK

I want to execute some code for each node in the tree. What would be the best way to achieve this?

Current, I'm using the following code:

var node = $scope.my_tree.get_first_node();
while (node) {
    if (node.CurrentState !== 1) {
        $scope.my_tree.expand_node(node);
    }
    node = $scope.my_tree.get_next_node(node);
}

But this will recurse endlessly until the browser throws a stack trace error somewhere in the get_closest_ancestor_next_sibling function.

I think I found some issue with the Clone method. Clone method is calling to changeKey() method for each child of node sent to method. The key that is changed is: DemographicId which is the primary key, while the node.__hashKey is not changing at all. This may be an issue to having two nodes with the same hasKey is it not?

Thanks.

`var now=$scope.my_tree.get_selected_node();

$scope.my_tree.add_node(now,{Name:'shijiazhuang',Description:'it is a city',DemographicId:'101'});`

I down the demo from your github,when i call the function add_node it doesn't work, what's the matter

Hi @thienhung1989 , I have a position field in database and I would like to synchronize it with__index__ property of node object. I tried to override it or to add it to the array which is passed to TreeDnDConvert.line2tree method but that didn't work. How could I do it?

I also tryed to order nodes directly in the view like that :
ng-repeat="node in treeData | orderBy: 'Position' track by node.__uid__"

It orders as it is supposed to be, but that makes drag and drop useless afterwards.

i want to drag a node from one list to another tree. before it is dropped to targer table tree i need to add two array of object to the existing node. How can i do it.. i can think of doing it by extending dropped event via callbacks. But it is not getting triggered. Can any one help me on this regard...

Hello, I want retrieve node when I click on row which contains it.
on-click and on-select attributes doesn't work and selected-node of tree-control is always null.

Can you give some example?

Can't move root node inside another root node

http://take.ms/ZiHFn

Hi,
This is a very nice angular tree, we really appreciate your hard work, we use this tree in our project,every thing is working perfect, while face some minor difficulties like how to collapse all tree nodes (except first node) at run time and its first child node must be selected with some background color of last column of child node same like displaying in snapshot. In your sample application expand and collapse only happens when tree is fully loaded and basic toolbar is used for those purpose. We need only once node is opened rest of all collapsed. When we click of any collapsed node, expanded node must be collapsed and opened the clicked node with the same index of child node selection of previous opened. For example Profitability(First Node) node is opened with first child node selection, when we click on (Growth) second or (Efficiency) third parent node than first child node must be selected. Currently expand and collapse only happens with plus(+) minus(-) buttons. Is it possible to expand and collapse on parent node clicking? How we get parent node with child node item on child node clicking? We need these implementations as soon as possible we need to deploy our project after these fixes. Your quick response must be appreciated.

Hi,

I am using this directive in my application. There are 5 levels in my tree. Initially all of them are expanded. Now when i try to collapse the parent i expect that complete node gets collapsed including all its expanded child nodes. But currently it is not happening. Child nodes at level 4 and level 5 doesn't collapse.

Help will be much appreciated.

1. go to this url:
   http://thienhung1989.github.io/angular-tree-dnd/demo/#/multi

2. when you mouse down on a node, the dragging begins.

The problem is that its impossible to do click (select) and dragging on the same tree. The drag should begin with the "dragstart" event instead of mousedown event.

I could use another element for drag handle, but then I would need yet another element for expanding/collapsing a node.

i have load the angular and angular-tree-dnd in html,
and init all the code in controller,
but i still get an error .
Error: [$injector:unpr] Unknown provider: $TreeDnDConvertProvider <- $TreeDnDConvert <- AdminArticlesCataloguesController,
what's is going on?

Hi:

I have noticed several useful bug fixes, etc. in the master and was wondering if a release to version 3.0.5 can be done as soon as possible please? Note that the version value listed in v3.0.4/bower.json is incorrect and set to 3.1.0. Master versions (bower.json and package.json) are set properly at 3.0.5.

Regards,

Bradley

Just like the title, I want to use json data to new a node and add to the tree.Can I do that?Thanks.

1. go to this demo page:
   http://thienhung1989.github.io/angular-tree-dnd/demo/#/list

2. drag something into the "Use Template-Url (Empty + Only Drop)" area, the blue area.

3. click on "remove" and clear out the "Use Template-Url" area.

4. I can no longer drag something into the "Use Template-Url" area.

I am on chrome 49 on windows 7.

Can we make the search case insensitive?

Hi ,
First thanks for this lib, this is awesome !

I had encounter some problems when adding dynamically a node in a tree .

When i add multiple node within the first level of the tree, and deleting the first childNode, it will delete all of his brother too.

Here is my "addNode" Function :

`
var newTreeElementParent = tree.get_parent(node); // getting the parent of node in tree where you want to add the new node right after

            //TODO creation of a node
            var new_node = {
                "title": "new node",
                "text": "my new node",
                "frontPageText": "some text"
            };

            var newTreeElement = $TreeDnDConvert.line2tree([new_node], 'id', 'parent_id'); //building node as expected by framework

            $scope.my_tree.add_node(node, newTreeElement[0], node.__children__.length + 1); // adding the new node

            `$scope.my_tree.reload_data();

`

Indeed, some node set parent_real to 0.
So the remove_node method will take the root node of the tree instead of the actual parent of this node.

I suggest you to change this in remove_node :
if (node.__parent_real__) { _parent = tree.get_parent(node).__children__; }
by :
if (node.__parent_real__ != null) { _parent = tree.get_parent(node).__children__; }

This fix will take care of this issue.

Thanks a lot !

Hello,

I got into an issue with disabling drop for specified nodes or tree levels.
Is it possible to do using API of your control?

Example:
Parent 1

• child 1
• child 2
• child 3

Parent 2

• child 4
• child 5

I want to disable "child 5" to be dropped under child 4.
Or I want to disable dropping Parent 2 as child of Parent 1.

I'm looking on this example: http://thienhung1989.github.io/angular-tree-dnd/demo/#/filter

Please, help.

Inside your "Filter" demo tab, the drag and drop functionality copies items when it moves them instead of simply moving them. I'm not sure if this is a bug in how the drag and drop was implemented for trees or if I'm missing a simple piece when playing with the demo. Please help

If tree contains only one item, tree is not refreshing after you remove this item. You can replay problem with demo page http://thienhung1989.github.io/angular-tree-dnd/demo/#/basic

I really like your control, but I am having a module injection issue, so I can't started with using it. What should I use for module injection? Is it 'ntt.TreeDnD'? See my code below. It is causing me to get [$injector:modulerr].

var App = angular.module('myApp', [
'ui.router',
'ui.bootstrap',
'ntt.TreeDnD'
])

Am I missing something here?

Hello!

Using angular-tree-dnd module on my project with wiredep, I noticed that it is adding the following entries in my index.html so the code is being loaded twice.

    <script src="/bower_components/angular-tree-dnd/dist/ng-tree-dnd.js"></script>
    <script src="/bower_components/angular-tree-dnd/dist/ng-tree-dnd.min.js"></script>

The problem comes from the "main" entry in bower.json:

  "main": [
    "dist/ng-tree-dnd.css",
    "dist/ng-tree-dnd.js",
    "dist/ng-tree-dnd.min.css",
    "dist/ng-tree-dnd.min.js"
  ],

From the bower documentation you can read about "main":

The entry-point files necessary to use your package. Only one file per filetype.

https://github.com/bower/bower.json-spec

So one of the css and js files should be removed from the "main" array that should contain only 2 files.

Hope this helps and thank you very much!

could you tell me ,how used the tree.add_node() method,i try many times,but it's not working ,way?

I see the $scope.callbacks but its not clear how those are triggered. I tried including them as items to $scope.callbacks but they are not firing when I drag or drop.

How to setup default order field? orderBy not worked, because i can't drag some elements to thi first position

when deleted the las data, the table still show it

Thanks for this awesome library. We need to collapse all tree nodes when its initially loaded. In the following demo all nodes are expanded initially.
http://thienhung1989.github.io/angular-tree-dnd/demo/#/basic
How we collapse all nodes either programmatically or with any property without clicking any button?

Thanks for this awesome library. I had some issues to get it working initially because the line2tree conversion expects that the ParentId has been processed before any of its children. This is not unreasonable, but for my dataset this failed, so I wrapped:

                        if (parent.__children__) {
                            parent.__children__.push(item);
                        } else {
                            parent.__children__ = [item];
                        }

in a

if(parent)
{
...
}

to solve this. Perhaps this could be a worthwhile addition.

When I use angular-tree-dnd I have an error

angular.min.js:13550 TypeError: Cannot read property 'children' of undefined
at Object._$initConvert.line2tree (ng-tree-dnd.js:1456)

var data = [{
    "description": null,
    "file": "/release.txt",
    "name": "Test7",
    "ParentId": null,
    "path": "site.net",
    "id": 6,
    "release": "1.0",
    "created": "2016-04-26 14:56:42"
}, {
    "description": null,
    "file": "/release.txt",
    "name": "Test5",
    "ParentId": null,
    "path": "site.net",
    "id": 4,
    "release": "1.0",
    "created": "2016-04-26 14:56:40"
}, {
    "description": null,
    "file": "/release.txt",
    "name": "Test1",
    "ParentId": 7,
    "path": "site.net",
    "id": 1,
    "release": "1.0",
    "created": "2016-04-26 14:49:07"
}, {
    "description": null,
    "file": "/release.txt",
    "name": "Test2",
    "ParentId": 7,
    "path": "site.net",
    "id": 2,
    "release": "1.0",
    "created": "2016-04-26 14:49:09"
}, {
    "description": null,
    "file": "/release.txt",
    "name": "Test4",
    "ParentId": 1,
    "path": "site.net",
    "id": 3,
    "release": "1.0",
    "created": "2016-04-26 14:56:39"
}, {
    "description": null,
    "file": "/release.txt",
    "name": "Test6",
    "ParentId": 1,
    "path": "site.net",
    "id": 5,
    "release": "1.0",
    "created": "2016-04-26 14:56:41"
}, {
    "description": null,
    "file": "/release.txt",
    "name": "Test8",
    "ParentId": 4,
    "path": "site.net",
    "id": 7,
    "release": "1.0",
    "created": "2016-04-26 14:56:43"
}, {
    "description": null,
    "file": "/release.txt",
    "name": "Test9",
    "ParentId": 4,
    "path": "site.net",
    "id": 8,
    "release": "1.0",
    "created": "2016-04-26 14:56:44"
}];

$scope.tree_data = $TreeDnDConvert.line2tree(data, 'id', 'ParentId');

How can I fix the problem please ? How to reorganize my array ? My data is provided by my database

is there any angular 2 version available for this tree. this is what exactly i wanted to implement. there is no other plugin is providing this. any help is really appreciated.

Is there any attribute like this? or any method that I can override?

I found, that in dist/ng-tree-dnd.js on the line 2095 error

    $params.dragIno = $TreeDnDHelper.dragInfo(dragScope);

I think there can be other errors.. Drag'n'drop doesn't work, I get library code used in the demo page http://thienhung1989.github.io/angular-tree-dnd/demo/#/custom-options and it works well

Hello,

I noticed an issue when you have a record that has a parent Id that is behind that record in the incoming data array.

For example in the demo:
If you were to change the demo-framework.js:

                    {
                        'Title': 'ACOM',
                        'ParentId':      null,
                        'Link':      'https://i.am.a.link.gov',
                        'Description':   'ACOM link',
                        'DisplayOrder':          1
                    }, {
                        'Title': 'BCOM',
                        'ParentId':      3, //Notice that this is referencing the record behind it.
                        'Link':      'https://i.am.b.link.gov',
                        'Description':   'BCOM link',
                        'DisplayOrder':          2
                    }, {
                        'Title': 'CCOM',
                        'ParentId':      2,
                        'Link':      'https://i.am.c.link.gov',
                        'Description':   'CCOM link',
                        'DisplayOrder':          3
                    }

Everything breaks. :(

Am I just overlooking something?

I was thinking that this code in ng-tree-dnd.js might be the culprit:

              while (i < len) {
                    item = data[i++];
                    _primary = item[primaryKey];
                    treeObjs[_primary] = item;
                    parentId = item[parentKey];
                    if (parentId) {
                        parent = treeObjs[parentId]; //This ends up null because the object isn't in there yet
                        if (parent.__children__) {
                            parent.__children__.push(item);
                        } else {
                            parent.__children__ = [item];
                        }
                    } else {
                        rootIds.push(_primary);
                    }
                }

I have a problem with angular-tree-dnd. It doesn't update nodes when i update treeData with request to myServer.
Have found that this problem works only with using attribute 'template-url'. Seems like angular-tree-dnd doesn't update user templates.

My template:

<script type="text/ng-template" id="tree-dnd-template-render.html">
    <ul tree-dnd-nodes="tree_data" class="tree">
        <li tree-dnd-node="node" ng-repeat="node in nodes track by node.__hashKey__"
            ng-show="node.__visible__" compile="expandingProperty.cellTemplate"
            ng-include="'tree-dnd-template-fetch.html'">
        </li>
    </ul>
</script>

<script type="text/ng-template" id="tree-dnd-template-fetch.html">
    <div class="tree-row"
         ng-class="(node.__selected__ ? 'list-group-item-success':'')"
         ng-click="onSelect(node)"
         ng-style="expandingProperty.cellStyle ? expandingProperty.cellStyle : {}">
        <a tree-dnd-node-handle>
            <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
        </a>
        {{node[expandingProperty.field] || node[expandingProperty]}}
        <a ng-click="user_clicks_branch(row.branch)">
            <i ng-class="$iconClass" ng-click="toggleExpand(node)"></i>
            <span ng-repeat="col in colDefinitions" ng-class="col.cellClass" ng-style="col.cellStyle"
                  compile="col.cellTemplate">
                {{node[col.field]}}
            </span>
        </a>
    </div>
    <ul tree-dnd-nodes="node.__children__">
        <li tree-dnd-node="node" ng-repeat="node in nodes track by node.__hashKey__"
            ng-show="node.__visible__" compile="expandingProperty.cellTemplate"
            ng-include="'tree-dnd-template-fetch.html'"></li>
    </ul>
</script>

and template-tree-dnd:

<tree-dnd tree-data="categories"
    tree-control="categoriesTree"
    primary-key="'id'"
    column-defs="col_defs_min"
    expand-on="expanding_property"
    on-select="select_handler(node)"
    on-click="select_handler(node)"
    template-url="tree-dnd-template-render.html"
</tree-dnd>

How to fix it?

can I put column options in context menu ?
or hide the columns and trigger clicks upon selection from a context menu ?

Is it possible to search 3 out of 5 fileds with only one searchbox?

Hello!

I was just curious if we could get a version number added to this project in the files?

Thank you!

Hi,

It looks like there is an issue either with the dist or the version.
I can grab the latest release (3.0.4) using bower and it has some issues like icons not visible but it should be fixed as you mentioned in the change log ($icon_class -> __icon_class__).
I could get it working by replacing the content of the ng-tree-dnd.js file with the current one in the master branch but it doesn't make sense as I want to user bower.

Could you update the version or the dist?

Thanks for the great work!

Just waste a lot of time to test the method [tree.add_node]。
Always failed. Why do not you put a easy demo about adding node?
And there is not only one user who was troubled by this problem.

I have some categories which should be restricted to drag under it and make it as "folders" (tree endpoints) is it possible for do that?

And can I set special icon for that categories only?

Hi, I found this error while I was testing the drag and drop option of angular-tree-dnd. After that, I saw that in your demo happens the same. Could you fix that? I need to implement this option on my project asap. Thanks.

you have so bad getting started doc your documantation must be updated and more clear

Thank you very much this awesome plugin!

I have found one unpleasant $digest error:
10 $digest() iterations reached. Aborting!

In List Tree if you make a tree with 10+ nested nodes and try to put it into another tree.
App will catch the error. Also it is related to occasions when you open a page, which uploads tree with 10+ nested nodes.

I tried to sort out it, but all my efforts were in vain

Hi,

Could it be possible to make default filtering case insensitive or at least add a parameter to do so?

I saw in the _fncheck method that a RegExp object is created to test the callback against data. The second parameter defines flags of the regular expression:

var _regex = new RegExp(callback, 'i');
return _regex.test(data);

Thanks in advance and keep up the good work! :)

Howdy,

Title about says it all. IDs can only be an integer. I have long IDs that are strings.

Perhaps I'm over-looking something? :)

do you have an idea why i get duplicated fields when using your model :) ?

in my view , i have :

<div ng-controller="SctServiceCatalogCtrl as mainCtrl">
<tree-dnd
        tree-class="table"
        tree-data="mainCtrl.tree_data"
        tree-control="mainCtrl.my_tree"
        column-defs="mainCtrl.col_defs"
        primary-key="serviceId"
        expand-on="mainCtrl.expanding_property"/>
</div>

Controller :

 static $inject = ['SctServiceCatalogBL','$digLog','$TreeDnDConvert','Restangular'];
    constructor(private sctServiceCatalogBl:SctServiceCatalogBl,
                private $digLog,
                private $TreeDnDConvert,
                private restangular) 
    {   
        var tree = {};
        this.tree_data = {};
        this.my_tree = tree = {};

        this.expanding_property = {
                **cellTemplate: "<td>{{node.name | lang_gettext}}</td>",**
                field:       'serviceId',
                titleClass:  'text-center',
                cellClass:   'v-middle',
                displayName: 'Name'
            };

        this.col_defs = [
                     {
                        displayName:  'Remove',
                        cellTemplate: '<button ng-click="tree.remove_node(node)" class="btn btn-default btn-sm">Remove</button>'
                    }];

        this.sctServiceCatalogBl.getList().then(
            (response) => {
                this.value=response;
                this.tree_data=$TreeDnDConvert.line2tree(this.value,'serviceId','parentServiceId');
            },
            (error) => {
                $digLog.showMException(error,null);
            }
        );    }}
export = SctServiceCatalogCtrl;

Thank you :)

Hi @thienhung1989 ,

Thanks for wonderful library.
Can you please put "main": "dist/ng-tree-dnd.js" in package.json. It will help us to import library in ES6.

Regards,
Durga