show "open" arrows for empty folders?

[Lance Sloan]

I'm using the Ajax lazy loading feature of jsTree to load information about folders and files from Google Drive.  Whenever my application gets information about an item that GD says is a folder, it sets the "children" property of the jsTree node to true, which causes the closed-node triangle to be displayed in the tree.

When the user clicks the triangle to open the node, if it turns out that GD says the node doesn't have any children (that is, an empty result is returned), then jsTree removes the triangle.  However, I would like for the opened-node triangle to be displayed instead.

How can I do that?

I've done some investigation and found that I can't simply change the styles to show the opened-node triangle for the leaf nodes.  That causes the non-folder leaf nodes to get the triangle, too.  I don't see anything in the DOM that indicates whether nodes are folders and that I could take advantage of in the styles.

My application uses the "types" plugin to store a "folder" or "non-folder" type for all nodes.  I use that with the "sort" plugin in order to sort folders before non-folders.  I think I can take advantage of that for this purpose, too, but only programmatically, not in the styles.

So, what I'm thinking of doing, in pseudo-code, is this:

fileTreeDiv.on('after_open.jstree', function(event, data) {
    if (data.node.get_type() === 'folder') {
        domNode = fileTree.get_node(data.node.id, true);
        domNode.addClass('jstree-open').removeClass('jstree-leaf');
    }
}

But I'm not sure that's the "right" thing to do.

[Ivan Bozhanov]

What you are suggesting will do the trick.
If you want to try and fetch again (on a consequent load) you can also set:

data.node.state.loaded = false;

That will also help with displaying the triangle if the parent is closed and then reopened (without this line the node will have no triangle once redrawn).

Best regards,
Ivan

[Lance Sloan]

Hi, Ivan.

The code I tried first was:

fileTreeDiv.on('load_node.jstree', function(event, data) {
    var treeNode = data.node;
    if (treeNode.type === NODE_TYPE_FOLDER) {
        domNode = fileTree.get_node(treeNode.id, true);

        domNode.addClass('jstree-open').removeClass('jstree-leaf');

        //data.node.state.loaded = false;
    }
});

Before I used the "load_node" event, I had tried the "before_open", "open_node", and "after_open" events. None of those worked, because they weren't triggered for a node without children.  Using "load_node" worked for the initial opening of the node, but as you pointed out, when the node is redrawn (for example, when its parent is closed, then reopened) the triangle isn't shown.

I liked your suggestion for setting the "loaded" state to false, because it would be nice to re-query the GD service to find child nodes that may have been added in the meantime.  However, just adding that state setting to the code above caused an endless loop.  Loading never completed.

My code uses a custom plugin to redraw nodes, so before I saw your suggestion about state, I thought that instead of using an event handler to display the triangle, I should probably just change my redraw function to do it there.  I'm going to try that next.  I expect that will work and it will make my code less complicated than doing some display work in the custom redraw function and some in an event handler.

[Ivan Bozhanov]

Either that, or defer the setting of state.loaded:
setTimeout(function () { data.node.state.loaded = false; }, 0);

The plugin approach should be fine too (I suppose even better) :)

Best regards,
Ivan

[Lance E Sloan]

Hi, Ivan.

I didn't think of delaying the state setting.  I'll give that a try.

The strange thing I've noticed is that the "redraw.jstree" event isn't being fired when I expected.  That event is what causes my custom redraw method to run, isn't it?

--

Lance E Sloan, Application Developer
Univ. of Michigan, Info. and Tech. Services, AIS AMP
http://www.its.umich.edu/
Get free online storage from Dropbox (Extra 500 MB with this link!): http://db.tt/anbh6EW

--
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/-UeKk33LKtI/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]

No, it happens afterwards (the event) and the event does not fire with each node.

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

[Lance E Sloan]

OK.  Thanks for confirming that.  In that case, I think it doesn't make any sense for me to try to change the node in my redraw function.  I've tried the setTimeout trick you suggested in my handler for the "load_node" event and it works pretty well.  

The result is slightly awkward in my opinion, because a click on the opened-folder triangle doesn't close it.  It causes jsTree to try reloading its data.  I experimented with setting the opened state to true, too, but I wasn't satisfied with that, either.  I'll leave it as is, replacing the class and setting loaded to false.  Hopefully, my testers will be satisfied with it.

Maybe this is an option that you'd consider adding to jsTree:  Always show the expansion handle even when folders are empty.

--

Lance E Sloan, Application Developer
Univ. of Michigan, Info. and Tech. Services, AIS AMP
http://www.its.umich.edu/
Get free online storage from Dropbox (Extra 500 MB with this link!): http://db.tt/anbh6EW

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

[Ivan Bozhanov]

I will think of adding an option.
Best regards,
Ivan