A good portion of this week was spent recovering some documents that were deleted by a rogue console application (most likely my fault). I wrote a Console Application to combine some document libraries and I spent a good portion of a week testing it. However, I did not really think of enough scenarios, because it obviously did not move the documents properly. Some libraries were moved and others were not. At any rate I practiced my SQL Restoration skills and wrote another two console applications to print out the document count for the libraries on our current portal and the restored portal. Then I compared the lists and copied over the missing files. The rest of the week was spent on this quick launch modification issue. I am not a JavaScript Guru, but I am stubborn person who will tackle Google and my own brain for a few days before giving up.
It was a pretty long day and I was pretty frustrated, so I went to our JavaScript Guru at work, Kevin. He's a really cool guy and knows some pretty neat things about JavaScript and AJAX. I told him we wanted to use the SharePoint Quick Launch Menu Control (<SharePoint:ASPMenu>) with an expand/collapse accordion/slider control type menu. I had tried a few different menu options and realized that most of them would not work, because SharePoint will override the CSS. The easiest way to do anything is to stick with there controls and bend the rules a little. About 6/7 pm on Friday I check my Gmail account and Kevin sent me an e-mail with some code. One hour later after some dinner and a movie I crack open my web user control and test it out. Sure enough it works. Here is a reference to the link that he used:
http://weblogs.asp.net/asmith/archive/2003/10/06/30744.aspx
Here is the code that finally ended up at the top of the user control:
<script type="text/javascript">
var _Menus = [];
_Menus.push("<% QuickLaunchMenuID.ClientID.ToString() %>");
//attach to the load/onload event the method
//to add the handler to add the animations when
//menu section is clicked.
if (window.addEventListener)
{window.addEventListener("load", AttachMenuAnimation, false);}
else if (window.attachEvent)
{window.attachEvent( "onload", AttachMenuAnimation );}
function AttachMenuAnimation()
{
if (_Menus != null) {
for ( i=0; i < _Menus.length; i++)
{
InitMenuAnimations(_Menus[i]);
}
}
}
//this function will attach events to all the TR elements that
//have IDs
function InitMenuAnimations(cntrl)
{
//get all of the TR elements in the table, TBODY is the first element
//so get all of the TR elements from the TBODY element
var allTr = document.getElementById(cntrl).childNodes[0].childNodes;
//loop through all of the TR objects and if it has an ID
//it is a section header so attach an event to hide or unhide
//its content, Attach the event in a non destructive manner
for(i=0;i < allTr.length;i++)
{
if (allTr[i].id != ""){
allTr[i].MyClick = HideUnhide;
//add the handler
XBrowserAddHandler(allTr[i],"click","MyClick");
}
}
}
function XBrowserAddHandler(target,eventName,handlerName) {
if ( target.addEventListener ) {
target.addEventListener(eventName, function(e){target[handlerName](e);}, false);
} else if ( target.attachEvent ) {
target.attachEvent("on" + eventName, function(e){target[handlerName](e);});
} else {
var originalHandler = target["on" + eventName];
if ( originalHandler ) {
target["on" + eventName] = function(e){originalHandler(e);target[handlerName](e);};
} else {
target["on" + eventName] = target[handlerName];
}
}
}
function HideUnhide(e)
{
var el = this.nextSibling;
if (el.id == ""){
if (el.style.display == "none")
el.style.display = "block";
else
el.style.display = "none";
}
}
</script>
If you paste that into the header of your page and add the ID of the menu above, then it should expand/collapse your headers and hide/un-hide your child nodes. In future I will show you guys how to loop through and add Quick Launch Nodes and any additional nodes you would like to the Quick Launch Menu Control. This is just a neat little tidbit that you guys can play with for now. Remember: JavaScript is fun, but if you can use a .Net Control or Code it is more manageable in the long run. Have a good weekend guys!