I can't select a node programmatically after the whole tree is loaded with new data

915 views

Skip to first unread message

JHV

unread,

Sep 15, 2015, 1:31:00 PM9/15/15

to jsTree

Hi.

I've been struggling two days with something that it seemed to be quite simple, yet I still haven't managed to do it :(

You see I have two treeviews in the same page, but only one of the the is visible at a time. To show and hide the treeviews I only use the simple jquery show and hide methods.

This is more of less the flow of my page:

1) The first treeview is loaded when the page is first loaded:

2) When one of the links "Seleccionar" in the above grid is clicked, I hide the first treeview and the grid to show the second tree as shown below:

3) In this page the tree the first node (the parent) should always be selected by default. Having the chance to select later any other node to show its content in the right pane or go back to the previous pane by clicking the button in the upper right hand corner of the image.

The problem I was having was the when I selected a node in the second tree that wasn't the parent node (which always has "0" as its id), calling the select_node event on the parent node didn't work any more.

$('#secondTree').jstree(true).select_node("ul > li:first");

At this point I thought, well perhaps the previous selected ids were kept and since other nodes are changed every time the second tree is loaded , the control can't find the previous selected id in the new loaded tree and hence no select_node event could be raised.

Having this in mind I tried calling the deselect_all(true) before I loaded the second tree, but it simply didn't work.

Finally it occurred to me that perhaps, destroying and recreating the second tree every time I needed to show it, but it turned out to be that although the selected node was highlighted the event is never raised. Reading this I found out that the destroying the tree causes all the event handlers to be removed.

Seriously I really need some help, since I don't even know what to tried now:

This is my code :

$(document).ready(function () {    



    //#region TREEVIEW

    var $secondTree = $('#firstTree')

                .on("select_node.jstree", function (evt, data) {

                    if (data.selected.length) {                       

                        var nroModelo = data.node.original.nro;

                        if (data.node.original.id > 0) {

                            nroModelo = 0;

                        }

                        loadRightPane(data.node.original.id, nroModelo);

                    }

                })

                .on("ready.jstree", function (e, data) {                 

                    //$("#firstTree").jstree(true).deselect_all(false);               

                    $('#firstTree').jstree(true).select_node("ul > li:first");

                }) 

                .off("keydown.jstree");

    function load_nodesForSecondTree() {

        $secondTree.jstree({

                    'core': {

                        'data': {

                            "type": "POST",

                            "url": "wfHistorialVersiones.aspx/ListarNodosVersiones",

                            "dataType": "json",

                            "contentType": "application/json;",

                            "data": function (node) {

                                var params = new Object();

                                params.nroModelo = g_nroModelo;

                                params.nombModelo = g_nombreModelo;

                                return JSON.stringify(params);

                            }

                        }

                    }

                    //            ,

                    //            "plugins": ["ui"],

                    //            "ui": {

                    //                // this makes the node with ID node_4 selected onload

                    //                "initially_select": ["0"]

                    //            }

                });   

        $secondTree.jstree(true).refresh();        

        showSecondTree(true);


    }   

    //#endregion TREEVIEW    

    function showSecondTree(show) {   

        if (show) {

            $("#firstTree").hide();

            $("#firstRightPane").hide();

            $("#secondTree").show();

            $("#secondRightPane").show();

        }

        else {

            $("#secondTree").hide();

            $("#secondRightPane").hide();          

//            $("#secondTree").jstree(true).deselect_all(); 

            $("#firstTree").show();

            $("#firstRightPane").show();




        }

    }  

   

    add_clickGoBackToFirstPane("btnGoBack");

    function add_clickGoBackToFirstPane(elemId) {

        elem = $("#" + elemId);

        elem.on('click', function () {

            showSecondTree(false);

        });

    }    
    
    //This function is called when a row in the grid is selected (see first image) and it is the one responsible of loading the second tree
    function add_clickAccion(elemId) {

        elem = $("#" + elemId);

        elem.on('click', function () { 

           // $("#firstTree").jstree(true).deselect_all();

            load_nodesForSecondTree();

        });




    }        




});

Ivan Bozhanov

unread,

Sep 18, 2015, 1:19:59 PM9/18/15

to jsTree

Do not use selectors - select_node does not work with selectors ... just with DOM nodes, jQuery obejcts or string IDs. So in your case this should do it:

$('#firstTree').jstree(true).select_node($("$firstTree ul > li:first"));