Dual jsTree Implementation

Question

I am newbie to jsTree, I want to use dual jsTree.

[left JsTrree] [ >> ] [right JsTrree]

\">>\" : Button for copy selected node from

Answer 1

I can help you with [+] click event. You have to modify your jquery.jstree.js (uncompressed version). Open it, find string with toggle_node : function (obj) (there is a tab symbol so search toggle_node) and add 1 line here. After edit it must be:

        toggle_node : function (obj) {
            obj = this._get_node(obj);
            this.__callback(obj); // these line must be added
            if(obj.hasClass("jstree-closed")) { return this.open_node(obj); }
            if(obj.hasClass("jstree-open")) { return this.close_node(obj);}             
        },

Now you can bind a callback as usual for toggle_node event. Here is example:

    $("#your_jstree").bind("toggle_node.jstree", function (e, data) {
        is_opened = $(data.rslt).hasClass('jstree-open') ? false : true;
        node_id = $(data.rslt).attr('id');
        alert('node with id='+node_id+' is '+(is_opened ? 'opening' : 'closing')+' now.');          
    })

These callback calls before node opens or closes. And also this event does not fire while the tree is loading, like if you use open_node event.