jsTree v3.0 vs v1.0

[Ashish Tripathi]

Hi,

In our current project we have to implement a hierarchical tree having large number of nodes (30K - 40K). Also copy and move operations will be used heavily on this tree. We have a  similar tree implementation in our project's old release and that implementation used jsTree1.0.
So we have to decide between jsTree3.0 and jsTree1.0. As i am new to jsTree can you please let me know about the benefits of jsTree3.0 over jsTree1.0. Also how the implementation of move and copy operations differ in these two implementations?

Thanks...

[Ivan Bozhanov]

Treat v.3 as a new product - although it is the same name, the larger jump in the major version is on purpose - to indicate a whole new API, different configuration and event handlers.

As for the differences:
1) v.3 is a lot faster. Exact numbers depends on configuration and data, but still - it is at least a few times faster in all scenarios (in some cases up to 20-30 times, or even trees so big that would crash v.1 work fine in v.3). This is mainly because all data is no longer stored on the DOM, but in an internal object, so traversing and redrawing are a lot faster, which brings me to the next major difference:
2) jstree v.1 had all loaded nodes in the DOM, v.3 on the other hand keeps only visible nodes in the DOM, which could be a lot faster for large nested trees.
3) Another major difference is that v.3 is a lot more stable than v.1 ever was.
4) I am no longer supporting v.1 and encouraging everyone to read the new docs and API and switch to v.3.

To sum up - v.3 is faster, more stable and supported. Still - it is a big change, as the API and config is very different - it is up to you to decide if you want to rewrite (to answer the specific question - the copy and move node operations are not very different but the whole API and config are).

Best regards,
Ivan

[marshall marshmallow]

1.) I have upgraded  v1.0 to v3.1.0 and my dnd code constantly closes my root node (even after i call open_node on my root element)
2.)the code sample from the jstree demo page does not seem to be an option as it did not work for/(because of) the way my framework was implemented (for both v1.0 and v3.*)

I am not sure how to update my dnd code from v1.0 to >=3.1.0 other than looking into the jstree source code (what has proven to be quite the challenge for a js/jquery beginner):

//my dnd v1.0:
$('#demo').jstree({                                                                                                                                                                                            
        core : {                                                                                                                                                                                                   
            check_callback : true                                                                                                                                                                                  
        },                                    
        "plugins" : ["themes","html_data","ui","crrm","wholerow","checkbox","dnd","contextmenu","types"],                                                                                                                                             
        "crrm" : {                                                                                                                                                                                             
                        input_width_limit : 200,                                                                                                                                                                   
                        move : {                                                                                                                                                                                   
                                check_move      : function (m)                                                                                                                                                     
                                    {                                                                                                                                                                              
                                        var p  = this._get_parent(m.o);                                                                                                                                            
                                        if(!p) return false;                                                                                                                                                       
                                        p = p == -1 ? this.get_container() : p;                                                                                                                                    
                                        console.log(m.np.attr("type"));                                                                                                                                            
                                        if (m.np.attr("type") == "menu") return true;                                                                                                                              
                                        return false;                                                                                                                                                              
                                    }                                                                                                                                                                              
                                }                                                                                                                                                                                  
                     },  
         "dnd" : {                                                                                                                                                                                             
                         drop_target     : false,                                                                                                                                                                  
                         drag_target     : false                                                                                                                                                                   
                      }
})
  .bind(                                                                                                                                                                                             
                "move_node.jstree" : function (event, data) {                                                                                                                                                      
                    var nodeid =data.rslt.o.attr("id");                                                                                                                                                            
                    var par = data.inst._get_parent(data.rslt.o);                                                                                                                                                  
                    var parid = par.attr("id");                                                                                                                                                                    
                    var cldr = par.children();                                                                                                                                                                     
                    var prev = data.rslt.o.prev().attr("id");                                                                                                                                                      
                }                                                                                                                                                                                                  
 });  

Kind Regards

[Ivan Bozhanov]

Sorry, I have long forgotten what each of the options in v.1 does. Anyway - I do not see the question here - how does your DND close the root node? Please share your v.3 code (or better - provide a jsfiddle) so that I can reproduce the problem and help you.

Best regards,
Ivan

[marshall marshmallow]

I've scrapped the old v1 dnd chunk and started from scratch using the dnd-plugin example.

My question would be:
when using this http://jsfiddle.net/3q9Ma/256/
how do I prevent child1 from being dropped onto child2 and ending up as the child node of child2?
In v1.0 there was check_move. It is not listed in the current API. What can I use instead?

Kind Regards

[Ivan Bozhanov]

You need check_callback - it will be called for all structure modifications and lets you prevent them. Have a look here:
http://stackoverflow.com/questions/30394771/drag-and-drop-jstree-confirmation/30396916#30396916

You will need to return false without a confirm of course, but I guess this example will be enough.

Best regards,
Ivan