I am using the webdatatree as a filter for a webdatagrid, and would really like to hide the root node to save space (choosing the root would activate all filters, which is kind of silly since that would be the same as not clicking anything anyway). I've got the functionality of everything on the page working beautifully, but I just want that root to go away (without hiding the entire tree). The webdatatree was loaded dynamically from a dataview (so the XML example I found won't help me). A solution that I could implement in a stylesheet, or in JavaScript is what I'm looking for. Thanks so much for any help.
Hi craigthames,
Thank you for posting in the community.
I am not sure I fully understand your requirement, however you can use something similar to:
ig_controls.WebDataTree1.getNodes().getNode(0).set_visible(false)
in order to hide the first root node in WebDataTree.
Please let me know if this helps.
Peter,
Thanks for the response. The details of what I'm doing with the tree are actually irrelavent. I was just putting it in there since that type of thing is usually asked. The code you provided DOES hide the root for me, but it also hides the rest of the tree. What I'm trying to do is basically make the root invisible (but it should still exist). So, to the user, it should look like the first level of the tree is actually multiple roots. Just for visual aid, this is what I have...
Level 0 (Root) Node
|----Level 1 Node
|----Level 2 Node
and this is what I'm trying to achive...
Level 1 Node
So, I want the true root to exist... I just don't want it seen by the user.
If you can tell me how to hide the expand/collapse image ONLY on the root, I can work with that, also (as I've been able to hide everything else associated with it).
Thank you for your replies.
The expand/collapse image of the Root node may be individually hidden using javascript. Please note however that this should be used with care. I suggest that you handle the Initialize client-side event of the tree as the image would need to be hidden after every postback. For instance:
Hope this helps.
Petar,
That did the trick! Thanks for your help.
For anyone else that might want to hide the rest of the root, here is a stripped-down version of what I used:
function
Tree_Initialize(sender, eventArgs)
{
var root = ig_controls.Tree.getNodes().getNode(0);
var nodeElement = root.get_element();
// hide the expand/collapse image
var expandCollapseImage = nodeElement.children[0];
expandCollapseImage.style.display =
"none";
// hide the checkbox
var checkElement = root._get_checkBox().get_element();
checkElement.style.display =
// hide the text/anchor
var anchorElement = root.get_anchorElement();
anchorElement.style.display =
}
Thank you for sharing your solution. Feel free to contact me if any further questions arise.