ezraroi / ngjstree Goto Github PK

Everytime I finish renaming an item, I get this:

TypeError: scope.tree.jstree(...).set_type is not a function
    at Object.link.nodesWatcher.onChanged (ngJsTree.js?v=1431071680:164)
    at changeWatcher.applyChanges (ngJsTree.js?v=1431071680:63)
    at Object.fn (ngJsTree.js?v=1431071680:81)
    at Scope.$get.Scope.$digest (angular.js?v=1431000285:14308)
    at angular.js?v=1431000285:14505
    at completeOutstandingRequest (angular.js?v=1431000285:4924)
    at angular.js?v=1431000285:5312

I want you to select a node disable automatic check. where I set it ? thank's.

Uncaught RangeError: Maximum call stack size exceeded
parse_flat @ (program):19parse_flat @ (program):84

I am loading a 400 node array. Please help.

First of all, great implementation!

When I add multiple root nodes, each with multiple children to ngJsTree I am unable to select both root nodes at the same time. I am also unable to select individual children of those root nodes. In summary, the tree just starts producing weird behavior.

To reproduce:

1. Go to your demo page
2. Add 2 child nodes to "Simple root node" (e.g. Child 3 and Child 4)
3. Try to select both Child 4 and the previously existing Child 2 (child of Root node 2)
   

Works in Original jsTree:

Hey,

First of all, Thanks for the angular directive for JsTree 👍

Do you have plans of updating Angular and JsTree versions (in your bower.json) ?

My CI builders are failing due to version mismatch.

P.S: I am currently using this directive with latest versions of Angular and JsTree. Everything seems to be working fine.

Hi!

When I use json data for jsTree with children but without parent, like this:

{
  id          : "string" // will be autogenerated if omitted
  text        : "string" // node text
  icon        : "string" // string for custom
  state       : {
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  },
  children    : []  // array of strings or objects
  li_attr     : {}  // attributes for the generated LI node
  a_attr      : {}  // attributes for the generated A node
} // note there is no parent property in this json

-- then pushing to ngJsTree's model doesn't rerender jsTree view. Incrementing version will do the trick, but I don't want to rerender whole tree if only one node is added.

I noticed that you use following code to add to the jsTree's model newly pushed node:

...
var parent = scope.tree.jstree(true).get_node(node.parent);
var res = scope.tree.jstree(true).create_node(parent, node, 'inside',function() {
...

-- so if node doesn't have parent property (as in my case) node wont' be added/

Using both children and parent at the same time is impossible (https://www.jstree.com/docs/json/) as jstree prefers parent and ignores children as far as I understand.

Hi,

I couldn't get the context menu running, here is my configurations:

$scope.i_treeConfig = {
...
contextmenu: {
items: function(node, callback){
var rename = {
label: "Rename",
action: function(node){
$scope.i_treeInstance.edit(node);
},
shortcut: '113',
shortcut_label: "F2"
};
var actions = {rename: rename};
callback(actions);
return actions;
}
},
...
plugins: ["wholerow", "dnd", "types", "contextmenu"]
};

...
some where in the HTML

the contextmenu won't appear, have i miss something?

Thanks
Ahmad

Is there any timeline for support of these available plugins?

http://plnkr.co/edit/1CgO3K9Y9R2tPkWplkFY?p=preview
modal opening on click on button "modal".

<div js-tree="treeConfig" should-apply="applyModelChanges()" ng-model="treeData" tree="treeInstance" tree-events="ready:readyCB;create_node:createCB;select_node:selectedNode;dnd_start:dndStart;dnd_stop:dndStop"></div>

$scope.dndStart = function() {
 console.log("11111");
}

it's not work!!

I know that that is fixed in the previous issue to understand.
However, no action is actually applied.
Am I doing wrong use?
I would like a guide to the Drag And Drop Event.

I using ngJsTree into
<accordion>
<accordion-group>
<accordion-heading>
</accordion-heading>
<div js-tree="treeConfig" should-apply="true" ng-model="treeData" tree="treeInstance" tree-events="ready:readyCB"></div>
</accordion-group>
<accordion>

and have $scope.treeInstance === undefined
out of this tags $scope.treeInstance !== undefined

How can i use accordion and ngJsTree toogether? Thanks!

Hello,
I would like to use this feature: https://github.com/vakata/jstree#populating-the-tree-using-a-callback-function

However, there is an if/else (https://github.com/ezraroi/ngJsTree/blob/master/ngJsTree.js#L126) that is always overwriting my core.data function.

I think it could be fixed just replacing if/else by:

config.core = config.core || {};
config.core.data = config.core.data || scope.treeData;

What do you think?

Thank you.

In your example "Using the Js Tree API from your controller" you say that i need only to use tree attribute and if i go to my controller i can call a method of Js Tree but the treeInstance is undefined. I saw your demo but there is no use of this attribute in the treeCtr.js. Any suggestions to make it work because i couldn't even in your demo.
thanks

I see references in your code to remove a node from an array, but for the life of me cannot figure out how to properly remove an object from the array. Is it possible to write an example of how to best go about removing a selected node from the tree?

The item's {..., state:{opened: true/false}} doesn't seem to change when you collapse the tree branch. I also noticed this when trying to use it with checkboxes and setting the item's {..., state:{checked: true}} which didn't work.

The function nodesWatcher.onChanged tries to call set_type, which is not a jstree core function, but a function added by the types plugin (which is not required to run jstree itself).

This is breaking my code because it's trying to call a method that doesn't exist.

I suggest checking if set_type exists before trying to call it.

Can i do lazy loading in Expand button. Is there any event binding available for it. I need to do lazy loading and add data on the fly during expansion of parent node. Is it viable in this ngJSTree.

Once selections are made i need to send back Checked values alone. Can we do it in this component. Thanks for your help.

Hello!

It seems that the check_node event is not fired : http://plnkr.co/edit/S1aJ1xtlEbfTfJRehmmE?p=preview

Where is the problem?

Can this bind to plugin events from checkbox (check_node.jstree) for example?

I am unable to get the tree to load data from an async promise. Is there a way to force the tree to render once the ng-model has changed?

Hello!

When I load data1 all is ok but all the tree is loaded in one time.
data1 = [{
"id": 1, "parent": "#", "text": "Node 1", "children": [
{ "id": 2, "parent": "1", "text": "Node 2" },
{ "id": 3, "parent": "1", "text": "node 3" }
]
}];

I want use the loading tree nodes on expand node event.

So I use data2 and I have this error when I want to expand the first node: treeCtrl: error from js tree - {"error":"nodata","plugin":"core","id":"core_05","reason":"Could not load node","data":"{"id":"1"}"} http://localhost:53001/Scripts/angular.js Line 11655

data2 = [
{ "id": 1, "parent": "#", "text": "Node 1", "children": true },
{ "id": 2, "parent": "1", "text": "Node 2" },
{ "id": 3, "parent": "1", "text": "Node 3" }
];

How can I do it? It is a bug or a problem with my code?

i'm kinda of stuck here, and need some help in getting the tree displayed.

1. I did play with jstree first, and load the following data correctly. I know the only thing matters is the text and state, but I need the rest of data there for other purpose.

[
    {
        "created": "",
        "name": "/",
        "type": "directory",
        "size": 0,
        "children": [
            {
                "created": "1422994495000",
                "name": "homepage",
                "type": "directory",
                "size": 136,
                "children": [
                    {
                        "created": "1422994489000",
                        "name": "carasole",
                        "type": "directory",
                        "size": 68,
                        "children": [],
                        "text": "carasole",
                        "state": {
                            "opened": true
                        }
                    }
                ],
                "text": "homepage",
                "state": {
                    "opened": true
                }
            },
            {
                "created": "1422994495000",
                "name": "others",
                "type": "directory",
                "size": 204,
                "children": [
                    {
                        "created": "1422993066000",
                        "name": "bc",
                        "type": "directory",
                        "size": 68,
                        "children": [],
                        "text": "bc",
                        "state": {
                            "opened": true
                        }
                    }
                ],
                "text": "others",
                "state": {
                    "opened": true
                }
            }
        ],
        "text": "/",
        "state": {
            "opened": true
        }
    }
]

2. I used the following line

                <div js-tree ng-model="treeData" tree-events="ready:treeReady;create_node:createNodeCB"></div>

and monitored the treeReady so that i know the tree is loaded

3. I know the treeData is there, because I can print it {{ treeData }}

4. however my tree is not displaying, so i wonder what i did wrong. Btw i didn't set any treeConfig. please help.

demo html:

<div js-tree="vm.treeConfig" should-apply="vm.applyModelChanges()" ng-model="vm.treeData" tree="vm.treeInstance" 
tree-events="ready:vm.readyCB;create_node:vm.createCB"></div>

related event handler

vm.readyCB = function() {
    $timeout(function() {
        vm.ignoreChanges = false;
        toaster.pop('success', 'JS Tree Ready', 'Js Tree issued the ready event')
    });
};

this.createCB  = function(e,item) {
    $timeout(function() {toaster.pop('success', 'Node Added', 'Added new node with the text ' + item.node.text)});
};

my question is why all these tree-events have to use $timeout ?
Please kindly tell me, thank you!

Could you please create tag v0.0.5?

For e.g In the demo page, if i want to checked both "Simple root node" and "Root node 2", i can't make both of them checked. Is there a way to change this behavior?

in the directive, when it first been initialized, it gets the data from outside model.

scope: {
                treeData: '=ngModel',
                shouldApply : '&'
            },

For instance I have assigned home.treeData to the directive, so scope.treeData also has the same data. Now if I change the value of home.treeData, it seem the scope.treeData was not updating, what am I doing wrong?

I am using checkbox plugin. I make a call of check_all() like that

$scope.treeReady = (e, data) ->
$scope.treeInstance.jstree(true).check_all()

Everything looks fine but in browser console i get that error:
TypeError: $scope.treeInstance.jstree(...).check_all is not a function

I am using ngJsTree and jstree version 3.0.8

Thank you.

not an issue, just a question. I added contextmenu plugin in the js-tree, so that I can right click a node and create a child. I've also added an event monitor renameNode so I can get the new node text and it's parent, then I updated this information back to treeData, but now the problem is the directive will detect this update, and automatically create a new node in the jsTree again with the same id and text.

Do you have any suggestion? The ideal way is when user change something on the tree, it update back to the model.

Hi, I'm trying to create a directive for a Drag'n'drop tree using ngJsTree. The tree is created and works, but so far I've been unable to use the treeInstance, as it always shows up as "undefined".

I tried to adapt your solution from the #8, and created a new plunker with a simple example of my code, which surprisingly works as expected:
http://plnkr.co/edit/onimKl8iGNyYUkRENW5T?p=preview

In my real application, the console.log for the TreeInstance keeps showing up as undefined, although the implementation is pretty similar. In this Plunker example, I'm not using a controller, but I have tried both approaches with the same unsuccessful result.

Any idea of what might be the problem?

Thanks in advance!

the archive distribution used by bower for v0.0.4 contains the version number 0.0.3:

{
    "name": "ng-js-tree",
    "main": "dist/ngJsTree.js",
    "version": "0.0.3",
    "homepage": "https://github.com/ezraroi/ngJsTree",
    "authors": [
        "ezraroi <[email protected]>"
    ],
    "description": "Angular directive for the famous JsTree",
    "keywords": [
        "Angular",
        "JsTree"
    ],
    "dependencies": {
        "angular": "~1.3",
        "jstree" : "~3.0.8"
    },
    "license": "MIT",
    "ignore": [
        "**/.*",
        "node_modules",
        "bower_components",
        "test",
        "temp",
        "demo",
        "Gruntfile.js",
        "package.json",
        "README.md"
    ],
    "devDependencies": {
        "angular-mocks": "~1.3.0",
        "jquery": "~2.1.1"
    }
}

I don't know if it's the problem of jstree 3.0.9, but when installed this directive, it shows scope.tree.jstree('destroy') undefined. But when I change it to $(scope.tree).jstree('destroy') it works.

So I think before you assign the elm to scope.tree, you need to wrap it with jQuery. So I modified your function a little bit:

scope.destroy = function () {
    var j_elm = $(elm);
    if (attrs.tree) {
        if (attrs.tree.indexOf('.') !== -1) {
            var split = attrs.tree.split('.');
            scope.tree = scope.$parent[split[0]][split[1]] = j_elm;
        }
        else {
            scope.tree = scope.$parent[attrs.tree] = j_elm;
        }

    } else {
        scope.tree = j_elm;
    }
    scope.tree.jstree('destroy');
};

Hi Roi,

I'm trying to show a unique description text when a checkbox is clicked.
Here is how to get all newly selected ones (from jstree api): https://www.jstree.com/plugins/ [Changed Plugin]
First, I'm trying to achieve this by having different syntax, but no luck;

var selected_nodes = $scope.treeInstance.jstree('changed');
var selected_nodes = $scope.treeInstance.jstree(true).changed(true);
var selected_nodes = $scope.treeInstance.jstree(true).get_selected('changed');
var selected_nodes = $scope.treeInstance.jstree(true).get_selected(true).changed(true);

Can you tell me how I can get only the newly selected nodes?

The second problem is auto-select. When It auto selects a parent or a child node, it also comes in changed array. So is there a way in angular directive you coded to get clicked node only?

Thanks.

I'm using AngularJS 1.4.2 and jQuery 2.1.4

my controller:

angular.module('app.controller', [
    'ngJsTree'
]).controller('AppController', function ($scope, $log) {
   //... 
    var selected_nodes = $scope.treeInstance.jstree(true).get_selected();
}

my template:
<div js-tree="treeConfig" ng-model="treeData" tree="treeInstance">

and got: Error: $scope.treeInstance is undefined

I cloned the demo and tried adding objects to the $scope.treeData variable. The objects I was trying were added successfully, but I noticed that after refreshing the page the state of each node is not preserved/applied (open or closed).

I'm not sure if this is happening because I'm pushing the objects after the tree is instantiated (so when objects are pushed, state plugin has already kicked in and out and hasn't applied anything because there wasn't nodes in the tree) or because there is a bug in ngJsTree that doesn't respect the state plugin.

Can I get some help with this one, please?

Is there any config / way to avoid child selection when parent is selected?

Added a new node to tree like
vm.getSelectedCategories = function(e,node) {
treeViewService.getTreeChildData(node.node.id).then(function(data){
angular.forEach(data.data, function(value, key) {
$timeout(function() {
vm.addNewNode(value.id,value.parent,value.text);
});
});
});
};
vm.addNewNode = function(id,parentId,text) {
vm.treeData.push({ id : id, parent : parentId, text : text});
};
but here, data is adding to the treeData Array. but not reflecting the same in the tree.

Note : if i added vm.treeConfig.version++; i can see the node in the tree. but this will re create the entire tree.

please let me know how i can avoid this re-creation of tree

thanks in advance :)

Hi,

In my form, I am trying to disable a button if no checkboxes are checked in a jstree component.
Whats the correct tree-event to be called? I have tried select_all/unselect_all as well but no luck.

I am trying this:
js-tree="treeConfig" ng-model="treeData" should-apply="ignoreChanges"
tree="treeInstance" tree-events="check_all:x();uncheck_all:y();"

$scope.y = function() {
$scope.formDisabled = true;
};

But the scope variable is not updated on check_all or uncheck_all.

Any ideas would be appreciated.

Thanks

Using the context menu plugin to create/rename/delete/edit everything appears as it should in the tree but the scope doesn't get updated with these changes.

Hi,

How do you register a callback for drag'n'drop events?

Hi,
I cannot init the widget asynchronously loading data after an ajax call.
The tree stay empty.
Could you provide an example, please?

Pseucodode:

$scope.treeData = [];
function init(response) {
   $scope.treeData = response;
}
resource.get(null, init);

Title says it all. If not, I get it - just a request. Thanks.

I have discovered that pushing multiple nodes at root level in succession hangs the browser.
My findings reveal that a while loop is set infinitely in the nodesWatcher.onAdded method.

nodesWatcher.onAdded = function (node) {
                    while(blocked) {}
                    blocked = true;
                    var parent = scope.tree.jstree(true).get_node(node.parent);
                    var res = scope.tree.jstree(true).create_node(parent, node, 'inside',function() {
                        blocked = false;
                    });
                    if (!res) {
                        blocked = false;
                    }
                };

Hello,

The tree in the demo does not allow you to select multiple elements at the same level (unless you select all with the checkbox of the parent of the level). Any idea why this would be?

Hello,
demo directory on master branch is different from gh-pages and is not working (eg. angular-busy is missing inside bower_components).

gh-pages looks fine.

Thanks!

Hello! I using ngJsTree, it's a super helpful for me! But i don't know, how close all nodes programmatically, when several nodes is selected. How can i do this? Thanks!

Hi,
in nodesWatcher.onAdded there is a code where while loop is used. This loop causes my application hangs up sometimes because callbacks setting blocked=false are not executed. Unfortunately I'm not able to reproduce it on demand, so I'm trying to find a way to leave this loop in some other way than setting this flag.
Can you please share some details why you've decided to use this while loop and what is usage limitation of this design (possible hints to which conforming should make me safe with it)?

Hi @ezraroi,

Thanks for creating and sharing this project.

I am trying to add a new node using a custom context menu.
After the new node is added I can see it inside the treeData array, but it doesn't show on the tree though.

I have created a plunker reproducing this issue.

I appreciate any help.