RadTreeView for ASP.NET
Table of Contents
Hiding TreeView Images - Line, Minus and Plus Send comments on this topic.
Example scenarios (How to) > Client -side > Hiding TreeView Images - Line, Minus and Plus

Glossary Item Box

This article shows how to hide all TreeView Images - the Line Images, Plus and Minus signs. In this case Nodes are toggle by clicking on their text as the Minus and Plus Images are gone.

 

Line Images are hidden by setting the ShowLineImages property of the TreeView to false. 

 

One way of hiding the Plus and Minus Images is by CSS:

Hide Images with CSS Copy Code
img[class='8']
{
   visibility: hidden !important;
}

div > img:first-child
{
   display: none !important;
}

This approach is applicable in IE7, FireFox, Opera and Safari. IE6 does not support the selectors above.

Another way of hiding the Images is by JavaScript: iterate through all TreeView Nodes' corresponding div elements; hide the img element which class attribute is set to 8 in each div.

Hide Images with JavaScript Copy Code
function hideTreeViewImages()
{
   var tree = <%= RadTreeView1.ClientID %>;
   var treeViewDiv = document.getElementById(tree.ID);

   var childDivs = treeViewDiv.childNodes;
   var childDivsCount = childDivs.length;

   for (var childDivIndex = 0; childDivIndex < childDivsCount; childDivIndex++)
   {
       var childDiv = childDivs[childDivIndex];

       var images = childDiv .getElementsByTagName("IMG");
       var imagesCount = images.length;

       for (var imageIndex = 0; imageIndex < imagesCount; imageIndex++)
       {
           var image = images[imageIndex];

           if (image.className == "8")
           {
               image.style.display = "none";
           }
       }
   }
}

window.onload = hideTreeViewImages;

 

Finally, we hook to the BeforeClientClick event of the TreeView and toggle the clicked Node in the event handler:

Handling the BeforeClientClick event Copy Code
function BeforeClientClick(node)
{
   node.Toggle();
}