CODEWITHSUNDEEP
jqueryjquery-uijquery-selectorsjstree
StackOverFlow
StackOverFlow

Reputation: 4614

How to hide root node from jsTree?

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

Upvotes: 5

Views: 11271

Answers (6)

Darren
Darren

Reputation: 577

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.

Upvotes: 6

MonstroDev
MonstroDev

Reputation: 194

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

Upvotes: 0

Engin Ardıç
Engin Ardıç

Reputation: 2469

$("#yourTreeDiv").on("loaded.jstree", function(e, data) {
    $("#yourTreeDiv > ul > li > i.jstree-icon").remove();
    $("#yourTreeDiv > ul > li > a.jstree-anchor").remove();
});

Upvotes: 0

user1285221
user1285221

Reputation: 71

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

Upvotes: 0

StackOverFlow
StackOverFlow

Reputation: 4614

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

Upvotes: 3

snies
snies

Reputation: 3521

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

Upvotes: 1

Related Questions