SPTreeView Expand/CollapseAll No Postback

SPTreeView has the functions ExpandAll() and CollapseAll(). Usually one would insert image buttons with onclick event handlers that calls the 2 functions above. The downside of this is that the image buttons will cause a postback, and the entire page will reload. This is not an ideal situation, especially if the tree view is a web part within the SharePoint page.

Here's how we can achieve the same objectives without a postback (using Javascript):

JS Functions to handle Expand/Collapse of nodes

function TreeView_ExpandCollapseAll(data, id, lineType, flag) { if (!data) { return; } $("[id='" + id + "'] a[id^='" + id + "n']").each(function() { nodeID = $(this).attr('id'); var idx = nodeID.substring(id.length + 1); TreeView_ToggleNode(data, idx, $(this).context, lineType, document.getElementById(nodeID + "Nodes"), flag); }); } function TreeView_ToggleNode(data, index, node, lineType, children, flag) { if (!data) { return; } var img = node.childNodes[0]; var newExpandState; try { if (flag == 1) { children.style.display = "block"; newExpandState = "e"; if ((typeof (img) != "undefined") && (img != null)) { if (lineType == "l") { img.src = data.images[15]; } else if (lineType == "t") { img.src = data.images[12]; } else if (lineType == "-") { img.src = data.images[18]; } else { img.src = data.images[5]; } img.alt = data.collapseToolTip.replace(/\{0\}/, TreeView_GetNodeText(node)); } } else { children.style.display = "none"; newExpandState = "c"; if ((typeof (img) != "undefined") && (img != null)) { if (lineType == "l") { img.src = data.images[14]; } else if (lineType == "t") { img.src = data.images[11]; } else if (lineType == "-") { img.src = data.images[17]; } else { img.src = data.images[4]; } img.alt = data.expandToolTip.replace(/\{0\}/, TreeView_GetNodeText(node)); } } } catch (e) { } data.expandState.value = data.expandState.value.substring(0, index) + newExpandState + data.expandState.value.slice(index + 1); }

The function TreeView_ToggleNode exists in a default JS file that is auto-embedded when you use the SPTreeView class (WebResource.axd?...). We are modifying it to take in an additional flag parameter to control whether to expand or collapse the nodes.

Include reference to JS file from WebPart code

Literal ltlJs = new Literal(); ltlJs.Text = "<script type='text/javascript' src='http://domain-name/Assets/js/TreeView.js'></script>"; this.Page.Header.Controls.Add(ltlJs);

Call Javascript function from WebPart controls

HtmlImage TreeExpandAll = new HtmlImage(); TreeExpandAll.Src = strExpandTree; TreeExpandAll.Alt = "Expand"; TreeExpandAll.Attributes["onclick"] = "TreeView_ExpandCollapseAll(" + treeViewSPW.ClientID + "_Data, '" + treeViewSPW.ClientID + "',' ', 1)"; HtmlImage TreeCollapseAll = new HtmlImage(); TreeCollapseAll.Src = strCollapseTree; TreeCollapseAll.Alt = "Collapse"; TreeCollapseAll.Attributes["onclick"] = "TreeView_ExpandCollapseAll(" + treeViewSPW.ClientID + "_Data, '" + treeViewSPW.ClientID + "',' ', 0)";

Note that the object treeViewSPW must be added to this.Controls before treeViewSPW.ClientID can be used.