How to hide root node from jsTree?

Question

[#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 ?

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');

[#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.

Solution 1

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.

Solution 2

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()
  });

Solution 3

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

Comments

[StackOverFlow]

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 ?

[StackOverFlow]

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 ?

[StackOverFlow]

answer is useful :) I will accept this answer only when if we can able to remove hardcoded value as mentioned in above comment :)

[StackOverFlow]

After applying provided css to hide root node. Look n feel issue came in only IE8. See updated question + 2nd Image added

[snies]

just make sure the surrounding div has overflow:hidden set in css

[StackOverFlow]

I set css : overflow:hidden to Outer DIV :: facing same issur : Not working.... :(

[snies]

well, you might try and check that the css z-level of the jsTree is lower than that of the surrounding div. other than that it's hard to tell from here. is it possible that you upload a demo to jasfiddle? maybe also draw a simple div in your Outer DIV and try to hide that first, to make sure you have no other issues.

[StackOverFlow]

what about hardcoded value ? How we can eliminate hard coded value like "Root"

[244an]

It doesn't work with "loaded.jstree" for me (jstree-rails-4-3.2.1), "ready.jstree" is working.