ezraroi / ngjstree Goto Github PK
View Code? Open in Web Editor NEWAngular Directive for the famous JS Tree
Home Page: http://ezraroi.github.io/ngJsTree/
License: MIT License
Angular Directive for the famous JS Tree
Home Page: http://ezraroi.github.io/ngJsTree/
License: MIT License
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.
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.
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?
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
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"
}
}
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 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');
};
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.
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;
}
};
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?
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?
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
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?
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!
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,
How do you register a callback for drag'n'drop events?
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?
Title says it all. If not, I get it - just a request. Thanks.
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!
Can this bind to plugin events from checkbox (check_node.jstree) for example?
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
Is there any timeline for support of these available plugins?
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.
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?
Is there any config / way to avoid child selection when parent is selected?
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.
<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.
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, 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!
Hello!
It seems that the check_node event is not fired : http://plnkr.co/edit/S1aJ1xtlEbfTfJRehmmE?p=preview
Where is the problem?
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.
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!
Could you please create tag v0.0.5?
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
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:
i'm kinda of stuck here, and need some help in getting the tree displayed.
[
{
"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
}
}
]
<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
I know the treeData is there, because I can print it {{ treeData }}
however my tree is not displaying, so i wonder what i did wrong. Btw i didn't set any treeConfig. please help.
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)?
I want you to select a node disable automatic check. where I set it ? thank's.
http://plnkr.co/edit/1CgO3K9Y9R2tPkWplkFY?p=preview
modal opening on click on button "modal".
Uncaught RangeError: Maximum call stack size exceeded
parse_flat @ (program):19parse_flat @ (program):84
I am loading a 400 node array. Please help.
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.
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);
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.
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! 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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.