Lazy loading on parent node about ngjstree HOT 25 OPEN

I saw the JStree documentation but i couldnt get the basic ajax demo code. And also its not in angular js. Could you please help me with an angular example using ngJStree for binding event to do lazy load on parent node click. I am very new to angularjs and this plugin. Thanks for your help in advance.

from ngjstree.

Is there a way to set Children to True yet? If not then can someone please give an example of @AlenkaM workaround? I don't fully understand how to implement the part in bold:

As a workaround, I am applying an empty child object now. Then set propery li_attr ={class: "hidden"} to this child. So after the list is expanded the empty child is not shown. Maybe this can help somebody.

Thanks.

from ngjstree.

Hi, you should bind for the select or expend events. In the jstree documentation you can find some examples

from ngjstree.

I would also like to have a sample code for ngJsTree with lazy loading. I am able to bind it correctly for the first time by making a separate $http call and recreating the tree instance, but when expanding a node which will need to load children asynchronously it produces following error.

error from js tree - {"error":"nodata","plugin":"core","id":"core_05","reason":"Could not load node","data":"{"id":"4"}"}

if thread has been closed with any solution, it would have been better.

Thanks in advance.

from ngjstree.

Yea I also have this problem. The only way that ngJsTree will detect any model changes is when I re-create the tree with version++. If I push anything to the treeData array, nothing happens (if I don't re-create). This problem has been plaguing me for a week now and I have no idea what I can still try to solve this...

from ngjstree.

You can see in the demo page that changes are detected automatically without tree recreation

from ngjstree.

Liujoey's fix from issue #14 worked for me for whatever reason.

from ngjstree.

Hello! Did you make any progress with issue #27?

I am receiving the same error, when trying to call a function on 'before_open' event, having children: true property in my object.

error from js tree - {"error":"nodata","plugin":"core","id":"core_05","reason":"Could not load node","data":"..

I set this property to true in order to get expand icon shown, when node does not have children.

I did not find any other way to show expand icon without assigning a child object, which I am trying to avoid, because it will slow down my application considerably.

from ngjstree.

Will try to implement this, but i am not sure i will have time in near future.

from ngjstree.

Ok, it can be really great if you solve it.

As a workaround, I am applying an empty child object now. Then set propery li_attr ={class: "hidden"} to this child. So after the list is expanded the empty child is not shown. Maybe this can help somebody.

from ngjstree.

As workaround I tried to add dummy node and on expand (before_open) i deleted that dummy node.
But when i delete dummy node it selects the parent. please look into checkbox plugin as well

from ngjstree.

+1 "children: true" issue

from ngjstree.

Looks like the data option for ngjstree is overridden by the following block in getOptions() method. If I comment the line config.core.data = scope.treeData, then the ngjstree starts working with ajax mode. But I have not tested other behavior of the tree. Thoughts ?
if (config.core) {
// config.core.data = scope.treeData;
}
else {
config.core = { data: scope.treeData };
}

from ngjstree.

The angular tree should not work with Ajax. When you comment this line you break the 2 way binding. You can load in Ajax data but you should add it to the array of the nodes inside apply cycle

from ngjstree.

Yeah, after further testing, I found that.

I have a tree which can have potential 60K nodes, what are my alternatives ? If I load everything at once, then tree becomes unresponsive and often leads to a browser crash, not a good user experience.

Any suggestions ?

from ngjstree.

Catch the right event if the tree and load your data async with $http or Ajax. After it create nodes objects and push them to the 2 way binding array.... this should work. Check the demo page

from ngjstree.

@AlenkaM 👍 for the suggested workaround, hours trying to debug the non firing of before_open!

from ngjstree.

Any update on children: true issue ?
Having same problem.

from ngjstree.

did you try the workaround of @AlenkaM ?

from ngjstree.

Yes, for now I am using befor_open to load grandChild.

from ngjstree.

+1 Child true, and not be necessary to rebuild the entire tree

from ngjstree.

How can I setting loading icon while loading data?

from ngjstree.

HI All,

I am using
function beforeOpen(e, item) {

//and trying to assign children to parent node
}

I can see the $scope.treeData is update but my tree is not refreshed with new data and clue?

from ngjstree.

@7899 just set to your item following property:
item.li_attr = {class:'hidden'};

from ngjstree.

Hello. I was faced with the same problem. As a workaround I used function for ng-model:

vm.treeData = function(node, cb) {
    loadChildren(node.id).then(function(res) {
        cb(prepareData(res));
    })
}

AFAIU, it's handled here.
I'm not sure that it's the best solution, but it works for me =)

from ngjstree.