ASP.NET AJAX Control Toolkit

Re: Accordion as a sitemap

Hyacinth Broadchest — Thu, 25 Jun 2009 06:17:31 GMT

...removed my post.

Re: Accordion as a sitemap

whatispunk — Tue, 06 May 2008 13:56:21 GMT

One thing you may consider trying is using something other than the link text of the nodes to open your link. If you were to add an icon to the right of the text (like an arrow) as an ImageButton this would be your navigation control while the clicking the text would merely open/close the pane. This way you could have as many nested accordions as you wanted (theoretically). But this is just an idea, I've not yet tried it.

Re: Accordion as a sitemap

Stoutheart — Tue, 06 May 2008 03:29:13 GMT

Anneleen,

The problem with the accordion control as a navigation menu is that it only seems to work if you only have one tier menus. To use a bulleted list as an example, it would look something like this:

Main Item 1

Sub Item 1
Sub Item 2

Main Item 2

Sub Item 1
Sub Item 2

If your menu structure has more then one tier then an accordion menu likely will not work; or at least I've not found a way to make it work. Again, using a bulleted list as an example:

Main Item 1

Sub Item 1

Sub Sub Item 1
Sub Sub Item 2

Sub Item 2

Main Item 2

Now, to move on to your next question, you can have a main menu item navigate to a link rather then display a sub menu, but I've ONLY gotten it to work IF that main item does NOT have a submenu. If it does, then I don't know how to get it to show the submenu AND navigate to a link. As long as it does not have a submenu, the link should work.

I have a working example of this, but I will have to dig it up. Please be patient with me a little longer and I will get it posted.

Thanks!

Re: Accordion as a sitemap

whatispunk — Mon, 05 May 2008 15:45:10 GMT

The Accordion control is part of the AjaxControlToolkit. It was not designed by me :P

The normal behavior is that when you click on a Header item it will expand that section of the accordion. Each link inside that section (below the header) is clickable and will perform an action or navigate somewhere.

The header cannot both perform an action/open a page and open its child panel (afaik). I could be wrong, who knows. But if it is possible I don't know how to do it. I'd love to twitter around with this code for you but it is at home, and I am at work.

If you do find a way to accomplish this please post it here. I would be very interrested to know too.

You should create a new thread in the forums asking "How to make Accordion Header Click navigate to url and open pane".

Sorry I can't be of greater help.

Re: Accordion as a sitemap

Anneleen — Mon, 05 May 2008 14:56:37 GMT

I'm sorry to bother you like this but I don't get what you mean? There isn't a possibility like this? Because I have some menuitems without a submenu & have some others with several submenu's

Greetz

Anneleen

Re: Accordion as a sitemap

whatispunk — Mon, 05 May 2008 14:25:15 GMT

What you are trying to do is not how the accordion was built. The accordion is designed so that when you click on a header link it will expand the node, not navigate to the page.

You are trying to get it to navigate to a page on a header click. So unless you want to change the Accordion code, I don't see how you are going to make this happen.

Re: Accordion as a sitemap

Anneleen — Mon, 05 May 2008 14:13:36 GMT

Thanks for your reply

I changed it already into this:

p.HeaderContainer.Controls.Add(New LiteralControl("<a href='" & RootNodesEnumerator.Current.url & "'>" & RootNodesEnumerator.Current.Title & "</a>"))

It shows the link at the bottom of the page but It doesn't goes towards the page.

What is the problem??

Re: Accordion as a sitemap

whatispunk — Mon, 05 May 2008 13:49:16 GMT

Try changing this line:

p.HeaderContainer.Controls.Add(New LiteralControl("" & RootNodesEnumerator.Current.Title & ""))

to this:

p.HeaderContainer.Controls.Add(New LiteralControl("<a onclick="headerOnClick(this)>" & RootNodesEnumerator.Current.Title & "</a>"))

You can change the onclick to whatever you need but it will have to be a javascript function you write. Passing 'this' as the parameter isn't mandatory, you can pass whatever you want, or you could simply set the href to the page's url and forget about the onclick.

As far as making the onmouseover of the header expand the accordion node, this will be much more difficult because you would have to change the accordion itself, as this built in behavior.

Re: Accordion as a sitemap

Anneleen — Mon, 05 May 2008 10:57:37 GMT

Thanks for the answer But what do I need to use to give it the possibility onClick or onMouseOver?? Because I use a href can I still use the onClick method? If I give already the link? How Can I fetcht the link then? Do I still have to use the href or do you suggest something else?

Greets

Re: Accordion as a sitemap

whatispunk — Thu, 01 May 2008 15:23:08 GMT

Sorry It's been quite a while since I've looked at this code (or used an Accordion) but I remember not being able to do this either.

If you convert the Accordion Headers to links then how will you open the accordion pane?

This was one major drawback of using it for site navigation.

I suppose you could change the code so a mouseover of the header would open the pane and a click would navigate? Or maybe a double click would open and a single would navigate or vice-versa.

Good luck.

Re: Accordion as a sitemap

Anneleen — Thu, 01 May 2008 13:27:44 GMT

Hi Thank you for this code it's really useful. But I wanted to make from the headers of the accordionpane also links

I changed the code to this

p.HeaderContainer.Controls.Add(New LiteralControl("<a href='" & RootNodesEnumerator.Current.url & "'>" & RootNodesEnumerator.Current.Title & "</a>"))

But this doesn't work

What do I wrong?

Greets

Anneleen

Re: Accordion as a sitemap

whatispunk — Tue, 27 Nov 2007 16:43:15 GMT

Not at the present, but it could be done.

Don't know how well it would perform in IE though. It would basically require nested Accordions within each pane. IE already has questionable performance with this control.

I was using a lot of PNG images to style it though and found that IE doesn't like 1px wide/tall PNGs. It likes larger blocks. Once I increased the size of the repeating PNG background images the performance got a lot better. But it still takes 20% cpu sometimes to expand or shrink a pane.

If you don't want the expand-a-shrink-a-bility in your sub-sub nodes you could just do it as a <ul> in the pane I guess. But that's probably not the effect you're looking for.

Re: Accordion as a sitemap

Stoutheart — Tue, 27 Nov 2007 16:43:13 GMT

As far as my example goes, no it does not support more than 1 level under it as an accordion control. You can still have a menu control load withing the accordion control or just a few indented bulleted lists. The way the accordion control is designed, it doesn't work with the idea of having more than a 2-tier menu. a 3-tier or more menu would need something other than an accordion control.

Of course, having said all of this, you could insert another accordion control within the first to handle the 3rd and/or 4th tiers... but it is then a seperate object and not part of the first at all. other than location on the page of course.

Does this make sense?

Re: Accordion as a sitemap

TCavins — Tue, 27 Nov 2007 15:53:52 GMT

Does this handle multiple levels?

For instance, in the screenshot posted, lets say the Elevator section had more sections underneath it. Would they also expand in another accordion control?

Tim

Re: Accordion as a sitemap

Stoutheart — Tue, 27 Nov 2007 13:03:02 GMT

I now have a version that will make sure the appropriate pane is open when the page is loaded. I had to make some tweaks to get my code to work with a dynamic sitemap pulled from an SQL database, but it's working now. Sometime I'll post my code again as well.