Hello Ed,
Plus and Minus signs could be removed either with CSS or with JavaScript. The former approach would only work in IE7, FireFox, Opera and Safari. IE6, on the other hand does not support the needed selectors.
In any case, here is the CSS code:
| img[class='8'] |
| { |
| visibility: hidden !important; |
| } |
| |
| div > img:first-child |
| { |
| display: none !important; |
| } |
Here is the JavaScript code for the second approach:
| function hideTreeViewImages() |
| { |
| var tree = <%= RadTreeView1.ClientID %>; |
| var treeViewDiv = document.getElementById(tree.ID); |
| |
| var childDivs = treeViewDiv.childNodes; |
| var childDivsCount = childDivs.length; |
| |
| //Iterate through all child divs of the main TreeView div. |
| for (var childDivIndex = 0; childDivIndex < childDivsCount; childDivIndex++) |
| { |
| var childDiv = childDivs[childDivIndex]; |
| |
| var images = childDiv .getElementsByTagName("IMG"); |
| var imagesCount = images.length; |
| |
| //Iterate through all img elements of the current Node's corresponding div. |
| for (var imageIndex = 0; imageIndex < imagesCount; imageIndex++) |
| { |
| var image = images[imageIndex]; |
| |
| if (image.className == "8") |
| { |
| //Hide img elements with class attribute set to "8" |
| //(these are Plus/Minus images of the TreeView). |
| image.style.display = "none"; |
| } |
| } |
| } |
| } |
| |
| //Hide images upon page load. |
| window.onload = hideTreeViewImages; |
| |
| //Handles the BeforeClientClick event of the RadTreeView: |
| // -- the Node is toggled; |
| // -- if the Node has child Nodes, its previously expanded sibling is collapsed. |
| function BeforeClientClick(node) |
| { |
| node.Toggle(); |
| |
| if (node.Nodes.length > 0) |
| { |
| CollapseExpandedSibling(node); |
| } |
| } |
| |
| //Collapse the already expanded siblings of a Node. |
| function CollapseExpandedSibling(node) |
| { |
| //Gets the correct parent of the Node - it's either another Node or the TreeView. |
| var parent = node.Parent; |
| |
| if (parent == null) |
| { |
| parent = node.TreeView; |
| } |
| |
| var siblings = parent.Nodes; |
| var siblingsCount = siblings.length; |
| |
| //Iterate through all sibling Nodes until an expanded one is found. |
| for (var nodeIndex = 0; nodeIndex < siblingsCount; nodeIndex++) |
| { |
| var siblingNode = siblings[nodeIndex]; |
| |
| if ((siblingNode != node) && |
| (siblingNode.Expanded)) |
| { |
| //Collapse the expanded sibling Node and exit the function. |
| siblingNode.Collapse(); |
| |
| return; |
| } |
| } |
| } |
In summary, upon page load the images of the TreeView are hidden. The
BeforeClientClick event is handled - the clicked Node is expanded and the previously expanded sibling of the clicked Node is collapsed.
I hope this helps.
Best wishes,
Simon
the Telerik team