5

[#1] I want to hide root node from jstree ?

I appended few sub-root node to "Root" node so I want to hide root node from jsTree ?

enter image description here

After applying following CSS To hide root node , Look n feel issue came in IE8 :

    $("ul:contains('Root')").css('position','relative');
    $("ul:contains('Root')").css('top','-20px');
    $("ul:contains('Root')").css('left','-20px');

CSS issue in IE8 to hide root node

[#2] In following core plugin,

I provided hard coded value(Root_ID) for Root node to open Root node Initially, It works fine

"core" : { initially_open" : [ "Root_ID" ] }

Root nodes ID may vary RootID, RID, Root_id, R_ID..... as we are providing different xml response.

Psudo code something like:

"core" : { initially_open" : [ **1st_node_of_Tree_like_(ul > li:first)_OR_$(".jstree-last").first()** ] }

How I can achieve this 2 things?

Any help or guidance in this matter would be appreciated.

6 Answers 6

6

It's a little counterintuitive but best way to create a tree with no explicit root node is to not provide any root node in the data, and make all the children of the root node have parent "#". jstree will render a tree with multiple top level children of the root. Avoids any messiness with trying to hide the root.

3

I found very Simple answer :)

$("#treeViewDiv").bind("loaded.jstree", 
 function (event, data) {
       // To hide root nodes text
       $("a:contains('Root')").css("visibility","hidden")  
       // Need to find other way to hide rootNodeName Any1 knows ?

       // To hide - icon
       $(".jstree-last .jstree-icon").first().hide()
  });
1
  • It doesn't work with "loaded.jstree" for me (jstree-rails-4-3.2.1), "ready.jstree" is working.
    – 244an
    Dec 24, 2015 at 10:49
1

try:

$("a:contains('Root')").css("visibility","hidden")

or

$("a:contains('Root')").css("display","none")

maybe there is also an option in jsTree, but i am not familar with that lib.

Update:

assuming your jsTree is in some kind of div, try moving it until Root Element is hidden:

$("ul:contains('Root')").css('position','relative');
$("ul:contains('Root')").css('top','-20px');
$("ul:contains('Root')").css('left','-20px');

You may have to edit the css selector("ul:contains('Root')") to get the right ul. Also you might want to edit the amount you move top and left

8
  • Thanks for reply :) Only "Root" name is hidden. "-" icon is not hidden. I want to hide both i.e + Root. <ins class="jstree-icon">&nbsp;</ins> is used by jsTree to show - icon. How to hide - icon related to root node ? May 3, 2012 at 13:06
  • Thanks both things are working fine :) . [#1] Provided css is valid for all browser ? [#2]Is there any way to avoid hard-coded value("Root") mentioned in example, while hiding Root node[icon and rootNodeName]. It may happen Root name may changes time to time. In that case how to ? May 3, 2012 at 17:42
  • answer is useful :) I will accept this answer only when if we can able to remove hardcoded value as mentioned in above comment :) May 3, 2012 at 18:14
  • After applying provided css to hide root node. Look n feel issue came in only IE8. See updated question + 2nd Image added May 4, 2012 at 6:43
  • just make sure the surrounding div has overflow:hidden set in css
    – snies
    May 4, 2012 at 8:29
0

Another solution that worked (at least in Chrome and Firefox), for me, is:

#root>ins, #root>a{
    display: none;
}

ul>#root{
    position: relative;
    /*top: -20px;*/
    left: -20px;
}
0
$("#yourTreeDiv").on("loaded.jstree", function(e, data) {
    $("#yourTreeDiv > ul > li > i.jstree-icon").remove();
    $("#yourTreeDiv > ul > li > a.jstree-anchor").remove();
});
0

In JS:

.on('after_open.jstree', function(e, data){
        var a = $('#file_tree').find('i');
        $(a[0]).hide();
        $(a[1]).hide();
    })

in css:

.jstree {
  display: inline-block;
  padding-right: 100%;
  margin-top: -20px;
  margin-left: -20px;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.