creating empty parents, loading children dynamically

[Lance Sloan]

I need some advice or examples to help me make some progress on my project.

What I want to do is create a top-level node without children, but it does have an arrow for opening the node.  When the user opens this node, the app would use Ajax to find the children of this node.  This arrangement would continue with all the children, depending on their type.

I thought that by specifying an opened state of false for my top-level node, that would cause it to show the arrow.  Of course, it doesn't.  Later, I found that by specifying a value of true for the children attribute when I create the node, I could cause the arrow to appear:

myTree.create_node('#', {

    id: '123456789',

    text: 'root',

    children: true

});

However, that arrow doesn't respond to clicks, so the node can't be opened.  Also, trying to use create_node() to make a child of that node silently fails.  Specifying false children like this seems to be a Bad Thing.

How can I create a node without children, but it's openable, and the app would be able to catch open_node.jstree events in order to load children?

[Ivan Bozhanov]

This is a really odd use case. Basically - if you wanted to do something like that you'd hook up a function as the core.data config property and load from it and you would not need to call create_node, etc - just use the core.data as function. Anyway - since I am not fully aware of what you are trying to achieve - you can try calling create_node with:
children : true,
state : { loaded : false },
And then when the node is opened if you set a function as core.data - that will be called (btw that might work even without the "state" key).

Give it a try.

Best regards,
Ivan

[Lance E Sloan]

Thanks for the quick response, Ivan. I'll give your suggestion a try. 

It may help if I explain the project better.  Basically, I need to create a file tree browser. The requirements are:

* Start with the "root" folder

* All folders are initially closed. 

* Only load children when the folders are opened, to avoid loading potentially large amounts of file data ahead of time.

* The usual opening arrows will trigger the opening of folders and loading of their children. 

If I'm going about this the wrong way and there's a better way to accomplish this with jsTree, I'm happy to take a different approach.

--
You received this message because you are subscribed to a topic in the Google Groups "jsTree" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jstree/T-VXhhZGAes/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jstree+un...@googlegroups.com.
To post to this group, send email to jst...@googlegroups.com.
Visit this group at http://groups.google.com/group/jstree.
For more options, visit https://groups.google.com/d/optout.

[Ivan Bozhanov]

Well, then why do you use create_node at all? Simply use the built-in AJAX lazy loading - that is a classic case - the demo on jstree.com does exactly that. Btw - I will be adding two more demos with 3.0.0 final - one of the is exactly file management. Take a look at the built-in AJAX lazy loading, sorry if I misunderstood something, but it seems you are approaching this in a wrong way.

To unsubscribe from this group and all its topics, send an email to jstree+unsubscribe@googlegroups.com.

[Lance E Sloan]

I will confess that I saw the Ajax loading examples before, but I didn't understand them.  Since you say that should be a better approach, I'll put more effort into studying this feature and see if I can get it to work the way I'd like.

Are there any examples of this feature on jsfiddle or similar sites?

--

Lance E Sloan, Application Developer
Univ. of Michigan, Info. and Tech. Services, AIS AMP
http://www.its.umich.edu/
Get free online disk space from Dropbox: http://db.tt/anbh6EW

To unsubscribe from this group and all its topics, send an email to jstree+un...@googlegroups.com.

[Lance Sloan]

After studying the examples and lots of experimentation, I've gotten the jsTree lazy loading via Ajax working in my project.  It gets data from Google drive and displays it in a tree.  The only problem is that GD doesn't have a convenient way of telling whether a folder has children.  So, I have to assume that every folder has children.  When expanding, if a folder turns out to not have children, the arrow will disappear, which is confusing for the user.  I'd like to find a convenient and efficient way of determining when to not show the expansion arrow for empty folders.

On Friday, March 28, 2014 12:35:19 PM UTC-4, Lance Sloan wrote:

I will confess that I saw the Ajax loading examples before, but I didn't understand them.  Since you say that should be a better approach, I'll put more effort into studying this feature and see if I can get it to work the way I'd like.

Are there any examples of this feature on jsfiddle or similar sites?

[Ivan Bozhanov]

Sorry, this seems to be a GD problem, nothing to do with jstree - you could check each folder before you send it to the client.

Best regards,
Ivan

[Lance Sloan]

Sure.  You're absolutely correct, Ivan.  I thought mentioning it here might get some response from somebody who has also seen this problem.

Since I will need to make another Ajax request to GD (or possibly multiple, one for each folder) to ask about the child status of each folder, I thought the best approach would be for me to assume every folder has children at first.  Then when the child status responses come back from GD, I can remove the children from nodes that don't have them.

The question is, what's the right way to remove the children from a node?

[Ivan Bozhanov]

If you are using the latest source that will happen automatically - just return an empty array and the open/close arrow will disappear.

best regards,
Ivan

[Lance Sloan]

Yes, that's happening now when the user clicks the expansion arrow to open the node.  However, if the app discovers that the node doesn't have children before the user clicks on the expansion arrow, is there a way to remove the arrow?

[Ivan Bozhanov]

Use:

var node = $('#tree').jstree(true).get_node("NODE_ID");
node.state.loaded = true;
node.children = [];
node = $('#tree').jstree(true).get_node("NODE_ID", true);
if(node) { node.removeClass("jstree-closed").addClass("jstree-leaf"); }

Best regards,
Ivan

[Lance E Sloan]

Thank you very much, Ivan.  Maybe this should be a method in the API.  What do you think?

--

Lance E Sloan, Application Developer
Univ. of Michigan, Info. and Tech. Services, AIS AMP
http://www.its.umich.edu/
Get free online disk space from Dropbox: http://db.tt/anbh6EW

--

[Ivan Bozhanov]

I will think about it, it is not something that will be commonly used. I try to keep the code to a minimum, as jstree is quite large as it is ... I will see if I can add it - any ideas for a name of the function?

To unsubscribe from this group and all its topics, send an email to jstree+unsubscribe@googlegroups.com.

[Lance E Sloan]

I guess I would call it delete_children(node).    I appreciate your intent to keep the API light.  If you decide this doesn't belong in the API, maybe your solution should just be added to the documentation.

I see that delete_node can accept a list of nodes to delete.  Could the same thing be accomplished by calling delete_node(get_children_dom(node))?

--

Lance E Sloan, Application Developer
Univ. of Michigan, Info. and Tech. Services, AIS AMP
http://www.its.umich.edu/
Get free online disk space from Dropbox: http://db.tt/anbh6EW

To unsubscribe from this group and all its topics, send an email to jstree+un...@googlegroups.com.

[Ivan Bozhanov]

If you have a loaded node with children and you want to delete them it is fairly easy:
instance.delete_node(instance.get_node("ID").children);

But in this case there should be a separate function, as there are no children to delete - they are not yet loaded, so the node is in a closed state with loaded set to false. I have not tested this yet, but this would probably work too:
var node = instance.get_node("ID");
node.state.loaded = true;
instance.redraw_node(node.parent, true);

I will see where I can mention this, I will include it in src/misc.js too.

Best regards,
Ivan