Lazy loading on parent node

[Saideprinz]

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.

[ezraroi]

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

[Saideprinz]

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.

[hiteshgaur]

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.

[Mateo-Luzi]

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

[ezraroi]

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

[Mateo-Luzi]

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

[AlenkaM]

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.

[ezraroi]

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

[AlenkaM]

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.

[jainsaurabh83]

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

[icruces]

+1 "children: true" issue

[vsonone]

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

[ezraroi]

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

[vsonone]

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 ?

[ezraroi]

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

[gaving]

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

[gauravbhavsar]

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

[ezraroi]

did you try the workaround of @AlenkaM ?

[gauravbhavsar]

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

[renandegrandi]

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

[tolya199178]

How can I setting loading icon while loading data?

[vrohini]

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?

[7899]

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.

[sauliuni]

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

[dmitryt]

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 =)