Buttons on each item itself

[alexandernst]

Is it possible to make jsTree use a custom template for each item (node and leaf) so that I can create a few buttons? (edit and delete on each item, for example)

Graphical example: http://docs.yeager.cm/image/326/manual

[vakata]

Yes, this has been discussed and implemented a few times by users in the user group. The best approach is to use a plugin which enhances the redraw_node function.
I believe the exact same request was created by someone in the user group. You can do it yourself too - just take a look at src/misc.js - there are a few example plugins that add icons to the interface.

Best regards,
Ivan

[alexandernst]

@vakata If I implement a plugin (with a nice API) that would allow to add variadic buttons (with callbacks), would you accept it in upstream?

I'm thinking about something like:

$('#jstree').jstree(true).add_action(<node obj>, <object with opts>);

Of course, <object with opts> would look like:

{
    "icon": "URI",
    "title": "...",
    "text": "...",
    "callback": function(){}
}

[vakata]

I can include it with the list of other 3rd party plugins that are available, but I do not plan to include such a plugin in the core. But be sure to share your plugin so that others can benefit and improve it. If there is a big interest I will consider adding such a plugin to the build, but it would have to be very flexible, to allow all sorts of button combinations per node, etc.

Best regards,
Ivan

[alexandernst]

@vakata Can you perhaps suggest me a good/flexible (in your opinion) API? A one that you'd like, so it gets more chances to be included as a plugin.

[vakata]

If I were to do that, I'd just go ahead and write it, keep in mind your ideas will be far more valuable, as you actually need this functionality. I would just like to see reasonable defaults and the option to configure on a per node basis (probably a callback).

Best regards,
Ivan

[alexandernst]

@vakata Can I call a function declared inside a plugin from a jstree instance? Something like:

$.jstree.plugins.actions = function (opts, parent) {

    this.hello_world = function () {
        console.log("H W!");
    }
}

$('#jstree').jstree(true).plugins.actions.hello_world(); // <--- 

[alexandernst]

Nevermind, I should read more carefully. Maybe you should think about copying the "How to do your own plugin" from the README.md in GitHub over to jsTree's page? (not seeing it there is what caused me asking this)

[alexandernst]

@vakata I think I have an initial draft of the plugin. Can you give me some thoughts on it before I publish it in the user group? Maybe some suggestions on how to improve it or some potential bugs that you may spot?

As you can see, I made it completely flexible, allowing multiple actions per node.

https://jsfiddle.net/ftmhokjn/41/

[vakata]

I will provide more info tomorrow as I am wrting from a mobile device now, but for one - you need to look at your css, the icons are way off on mobile, also remove any jquery code from redraw node and the functions it invokes, it is a serious performance issue.
Best regards,
Ivan

[alexandernst]

I reduced the number of calls to jQuery, fixes some bugs I found and created a GitHub and a NPM package with some docs and an example, so you can read/test this easily. I'll announce it as soon as you give me your "good-enough-ok" :)

[alexandernst]

Yup... I forgot to paste the link to the GitHub repo 😆 jstree-actions

[vakata]

Thank you for your contribution - it looks great!

Unfortunately, I won't be able to merge this in the core, for 2 reasons:

1. You still have jQuery calls in redraw node (or triggered from it), which should be vanillaJS only, that means the max amount of nodes will be drastically decreased.
2. You dropped IE8 support, so if I merge this, it has to be as v.4 as one of the supported browsers is dropped.

But having a separate repo is actually great - the same approach jsTreeGrid took, it is nice to see a few third party plugins shaping up.

Best regards,
Ivan

[alexandernst]

I'm working on removing all the jQuery calls, iirc there are only 2 or 3 left (after the last push I did a few minutes ago).

About the IE8 support, the only remaining thing is the forEach that I'm using, which can be easily added by the plugin itself, extending Array.prototype.

I'll try to finish fixing both things and ping you back ;)

[vakata]

It is a very bad practice to extend any native object from a plugin. It may cause conflicts. When building a library or plugin it is crucial that your code does not pollute the global scope or other native objects (unless your lib or plugin is actually aiming at enhancing such objects).

For example - jstree only "pollutes" the $ scope (as jQuery is a dependency anyway), and it touches only two properties inside that object: vakata (for helpers) and of course jstree.

I believe it is a good rule to follow - do not modify anything that you did not write.

Let me know when you are done and I will go over the plugin.

Best regards,
Ivan

[alexandernst]

Ok, I used a simple for(i; length; ++) loop instead. Hopefully that will work on anything.
I think it's done. No more $ calls nor any ES5 features, so I think it's ready for a second review.

[alexandernst]

I just pushed a small bug-fix release. If you were checking the code, make sure to check the latest changes.

[mikila85]

is this going to be available anytime soon?
currently not working and ruining other "conditionalselect" plugin that i use

[alexandernst]

just use my plugin which is released in my account

[mikila85]

it was the fault of "conditionalselect" plugin.. still dunno why but switching the order of the plugins in the list putting conditionalselect last solved the issue.