My Battle with the Quick Launch Accordion Slider Control

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!

Technorati Tags: ,

Print | posted on Friday, June 13, 2008 9:49 PM

Feedback

# re: My Battle with the Quick Launch Accordion Slider Control

Left by Basem Alabbasi at 7/7/2008 7:10 AM
Gravatar Thank you for the cool sharing, but i am wondering where exactly to place the above JS code in the default.master page ? And what about the (<SharePoint:ASPMenu>) element,how is it going to interact with JS Code!!

Your response would be really appreciated.

# Quick Launch Menu

Left by Basem at 7/7/2008 7:11 AM
Gravatar Thank you for the cool sharing, but i am wondering where exactly to place the above JS code in the default.master page ? And what about the (<SharePoint:ASPMenu>) element,how is it going to interact with JS Code!!

Your response would be really appreciated...

# re: My Battle with the Quick Launch Accordion Slider Control

Left by MOSSLover at 7/7/2008 3:36 PM
Gravatar You can put it below the code for the core.js file or you can put it inside the webpart or control if you create one for the menu (in a webpart you want to render the script in a web user control you want to add it below the server code). To connect with the control you need to pass in the id for the quick launch control, so you can right click on the control in SharePoint Designer and get the id. Then you want to paste it into this part of the Javascript:
"<% QuickLaunchMenuID.ClientID.ToString() %> where QuickLaunchMenuID is located. In .Net that gets the Javascript id, so that it can connect to the .Net control.
Let me know if you need further clarification.

# re: My Battle with the Quick Launch Accordion Slider Control

Left by Max at 8/5/2008 5:32 PM
Gravatar Hi there
Thanks for sharing, i'm trying to use the code but can't do so far.
May you help me clarifying how you make it work and where to put the code?
Many thanks in advance, I have been looking for this functionality for long time.

# re: My Battle with the Quick Launch Accordion Slider Control

Left by MOSSLover at 8/6/2008 4:01 PM
Gravatar I added the code to a user control in a script section after the server side code. In a webpart you probably want to render the code using a string. In SharePoint Designer I believe you can add it after any content placeholder tag. You may need to change the QuickLaunchMenuID tag to whatever the name of the default quick launch menu is or whatever the name of your custom quick launch menu.

# re: My Battle with the Quick Launch Accordion Slider Control

Left by Lauri at 8/20/2008 2:53 AM
Gravatar Hi,

This seems like a cool solution = ) I get "No code blocks allowed" when I paste the script inside the head of my master page. Could you help me with this problem, please?

# re: My Battle with the Quick Launch Accordion Slider Control

Left by MOSSLover at 8/20/2008 7:43 AM
Gravatar There are two ways you can solve this. Take out this piece of code: QuickLaunchMenuID.ClientID.ToString() and go into the source code (view source code on IE) and find the name that looks like zz2_...QuickLaunch. Then paste it into as "zz2_...QuickLaunch", and remove the <% QuickLaunchMenuID.ClientID.ToString() %>. The second option is place the code into a web part. I think the easiest option is the first option. If you need any additional help fill out the contact form and I can help you via e-mail.

# re: My Battle with the Quick Launch Accordion Slider Control

Left by Bryan at 8/20/2008 11:59 AM
Gravatar I ended up finding the correct ID and pasting it as you mentioned above and the page renders fine but the accordian sliding effect is not occurring on the quick launch. Not sure, but do you need to change any of the properties of the aspmenu to get this to work?

# re: My Battle with the Quick Launch Accordion Slider Control

Left by MOSSLover at 8/20/2008 12:13 PM
Gravatar As far as I know you don't need to change anything else. The javascript should push in the menu for the control and loop through the control. Also, this only works with the default aspmenu control and not if you change it to show items at a 2nd level. I'm going to do some testing in my vpc over the weekend and I will get back to you on what I find. I might have another method.

# re: My Battle with the Quick Launch Accordion Slider Control

Left by Highdesert_nm at 10/8/2008 9:49 PM
Gravatar No code blocks allowed.
Edit the web.comfig
Include <PageParserPath VirtualPath="/_catalogs/masterpage/default.master" CompilationMode="Always" AllowServerSideScript="true" /> in the PageParserPaths tag.

But I'm getting An error occurred during the processing of . http://server//_catalogs/masterpage/default.master(21): error CS1002: ; expected
which is
_Menus.push("<% QuickLaunchMenu.ClientID.ToString() %>");
I'm not sure if I have the ID correct or if there is something else wrong.
TIA

# re: My Battle with the Quick Launch Accordion Slider Control

Left by Alexander at 10/9/2008 9:18 PM
Gravatar Hello MOSSLover, first of all I congratulate you for the great work they do done, you know I've done some tests with the script but did not get the expected result, the java script code I've placed inside core.js as discussed above, however no Achieving get the ID of the control you mention "To connect with the control you need to pass in the id for the quick launch control, so you can right click on the control in SharePoint Designer and get the id. Then you want to paste it into this part of the Javascript:
"<% QuickLaunchMenuID.ClientID.ToString ()%> where QuickLaunchMenuID is located." sharepoint since no achievement to get that ID, truthful'm starting to sharepoint and asp and I walk a little lost ... thanks in advance ...

# re: My Battle with the Quick Launch Accordion Slider Control

Left by ken at 10/20/2008 2:57 AM
Gravatar Hi MOSSLover,thanks for the posting. I do get it worked. Just wonder how can you make the Quick Launch Bar collapsed instead of expanded

# re: My Battle with the Quick Launch Accordion Slider Control

Left by jini at 12/1/2008 7:54 AM
Gravatar Hi ,
I tried all the steps but failed to see results. can you please explain the steps to implement.

Thanks

# re: My Battle with the Quick Launch Accordion Slider Control

Left by Rajesh at 3/4/2010 3:50 PM
Gravatar Hi,

I have tried with that code snippet, But still I am facing problms like Code blocks are not allowed and etc. Could you please send me the steps how to achive the accordion menu in Sharepoint

# re: My Battle with the Quick Launch Accordion Slider Control

Left by husso at 5/25/2010 5:51 PM
Gravatar hi,

can you please put all the steps needed in a file so that we can follow the steps to get it working. I tried but it failed so I gave up trying again.

thanks
husso

Your comment:





 

Copyright © MOSSLover

Design by Bartosz Brzezinski

Design by Phil Haack Based On A Design By Bartosz Brzezinski