Creating an Outlook Navigation Bar using the ListView and Accordion Controls
One of the designers on our UI team requested a screen mockup with a page layout that is similar to your typical email client. The page is divided vertically into 2 panes. The left pane contains a 2 level hierarchy of categories and subcategories. As the user selects different subcategories the designer wants the right pane's content to be updated with the corresponding information. Just like Outlook, the designer wants the subcategories to be displayed within expanding and collapsing panels.
I am familiar enough with the AjaxControlToolkit's Accordion control to know that it should be the right tool for the job here, but I haven't actually used it before. So I did a little research on the Accordion and created a small demo page that we used to get a feel for how the control behaves and what it takes to build and style it.
Live Demo (IE6, IE7 and FF) | Download (.Net 3.5 and Toolkit Version 3.5.11119.0)
Overview of the Accordion AjaxControlToolkit Control
In case the Accordion control is brand new to you, here is the description of the control taken from the toolkit's documentation.
The Accordion is not the only toolkit control that allows you to provide multiple panes of content and display them one at a time, the Tab control does this as well. The trick is deciding what control better meets your requirements. For my scenario the choice was simple - my UI design team had already made this decision for me ;). However, if you are interested in reading about the trade-offs between the general class of Tabs and Accordion presentation styles, I would recommend reading the following articles on UI patterns
- UI Patterns, Closable Panels
- UI Patterns, Card Stack
- Yahoo! Design Pattern Library, Module Tabs
- Yahoo! Design Pattern Library, Collapse Transition
While there are some visual differences between the Tab and Accordion controls, the markup for these two controls share a similar structure. Just like the Tab control, there are templates provided for specifying the markup for the header and content of each of the AccordionPanes.
Below are 2 sample screen shots of a simple Accordion Control that contains 2 panes of content: Mail and Notes. Just below these screen shots is the markup I used to create these screen shots. I in-lined some basic styles to make it easier to map the AccordionPanes markup to the screen shots .
Building the AccordionPane Content with the ListView
After I had the feel for what it takes to creating the individual AccordionPanes and a rough idea for how I wanted to present the sub-categories, I then started replacing the pane content with the new ListView control. To do this, I removed the static UL/LI structure from the AccordionPane's Content section and replaced it with a ListView (which is now responsible for generating this content). Making this replacement allows me to dynamically generate the UL/LI structure no matter how many subcategories there are. Below is the new markup for the Notes panel.
Styling the Accordion
Now I have the basic structure I was looking for, but the style needs some work.
Styling the Pane's Header
To style the pane headers, I used 2 images. One for the background and another for the mouseover.
Styling the Pane's Content Background
To style the content background, I used the following background image.
Styling the Pane's UL/LI
Styling the UL/LI was a little bit more difficult for cross browser support. I started off using the LI's list-style-image property, but because of the differences in padding and margins used by the different browsers, this never rendered how I wanted in IE7. So instead I followed this advise and used the LI's background property instead. This worked much better. Here are a few of the images I used for the Mail subcategories:
Because these images are specific to each individual item, I generated the in-line style rule using a databinding expression like so
By the way, all of the images for this sample were taken from ComponentArt's great looking Outlook 2003 NavBar example. The download includes both PNG and GIF image formats. I used GIF because I wanted to support IE6, but I included both just anyone would find them useful.
Important Accordion Properties
After I had the AccordionPane content rendering as desired, I started tweaking the behavior by modifying some the of properties the Accordion control exposes. Here are a few of the ones that I found useful:
- FadeTransitions
- If you set this to true, a Fade Animation will be applied to the Accordion as the user transitions between selected panes.
- RequireOpenPane
- When this is set to true, the Accordion control will always have one pane open. If you set it to false, the user can close the currently open pane by clicking on its header (leaving all of the panes closed).
- AutoSize
- SuppressHeaderPostbacks
- When this is set to true, the Accordion will automatically suppress any postbacks that originate from controls contained within the AccordionPanes Header's.
A Few Things I Didn't Get To
- Creating a sprite for the images
- Using JavaScript instead of the :hover pseudo class for the Header hover style's
- Looking into some weirdness with how the Accordion works when AutoSize is set to Fill
- I can reproduce some of this weirdness using the Accordion Demo by doing the following steps
- Open http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Accordion/Accordion.aspx in IE7
- Set the AutoSize drop down value to Fill
- Click on the AutoSize panel. Notice how the 'Control or Extender' and 'What is ASP.NET AJAX' disappear for a bit while the AutoSize panel is being repositioned. This doesn't happen when AutoSize is set to None
- I can reproduce some of this weirdness using the Accordion Demo by doing the following steps
That's it. Enjoy!
Comments
Looks nice but I cant get to the other sections with Javascript turned off.
>>Looks nice but I cant get to the other sections with Javascript turned off.
Duh!
This is a great example, thank you !
Hey Matt,
Nice Article
I have done same thing based on Windows XP Theme.
Very nice! And it also works in Opera :-)
Very nice DEMO, I like the simplicity!
nice work.
Hello Matt: I get strange behavior on both Fill and Limit AutoSize enums in IE; however, I also receive different strange behavior in FF. Very stange ;). Thanks for another useful article. Peace... -Dan
I did something very similar a couple weeks ago. Couple this with the DragPanelExtender and you have an nice little floating "toolbox".
This is great stuff! Do you have a download of the source code available?
Hi,
It is very good article. Appreciate your effort.
Thanks,
Suresh M
Would be nice if the AjaxControlToolkit didnt have so many bugs still in it. I hope it gets "finished" to make using controls like this a more viable solution.
Is there an ASP.NET 2.0 alternative to the list view?
It really works in OPERA!!! :)
Its very nice,Thanks!
Super stuff, just what I was looking for inclusion in a project!
@Rik -
Sorry Rik. Not too many of the examples found around here are going to work with JavaScript turned off.
@Vish -
Do you have a preview or download I could link to?
@Joseph -
I would try the Repeater, its the most flexible.
@Andrei -
Great.
@Joseph -
I agree. Some of the controls could use a bit more polishing. It is great that it is open source but its too bad the ASP.NET community (me included) has contributed more to it. Then maybe some of these issues would go away
@Dan -
You can follow the download link at the top of the post to get the source code.
Nice example ..
so good
good article.thanks
"allows you to provide multiple panes of content and display them one at a time" Is possible to open more than one at a time, causing grow/shrink control?
Also is it possible to resize individual panes?
Great post I just ask you to do one thing that I can not find anywhere on the net. ANYWHERE!
Where you have Mail, Notes and Contacts (Lets call those Categories) and then inside each Category you have the items for that category. Like the one shown on the page; you have the Mail "Category" opened and inside you show the "Items" for Mail like mail, Inbox, Outbox.....
All you have to do is make the Categories be databound to a databse table. Then when user clicks on Mail the categoryID is used as a filter to show the Items (Mailbox, Inbox, Drafts....)
Like I said I CAN NOT FIND ONE example like the one I describe anywhere on the net.
PLEASE HELP
Thanks
good!!
Hi
I like this http://mattberseth2.com/outlook_navbar/
very much
is that a way to reproduce this just using JavaScript or JQuery ?
a "conventional" way ...
Hello Matt,
I regularly read your blog. Im also impressed by the screen shots you post in your blog.
I wonder which tool you are using for these neat captures?
Regards,
Nitin
Like it very much!
Hi,
very nice post Ill be using this for my project.
Im just think will it be possible for you to post a outlook navbar that is dynamic and hierarchical up to 3 levels.
I would really appreciate it. thanks.
Thats great sample. As you said, your colleague wanted to show right pane content with selecting subcategory. Could you show me how to set event to each subcategory? When event is called, the corresponding information will be showed on the right pane. Im a newer. Id appreciate it. Thanks
Anything similar in winforms will be very helpfull
Wooow..thanks for sharing.
This is very helpfull.
You have great stuff out here!!!
My question on the article "Creating an Outlook Navigation Bar using the ListView and Accordion Controls" is
Is it possible to retrive a tree view structure in the accordian control from database.
Thanks
Matt:
Great blog - How did you happen to get rid of the bullets on each list item within the list view?
great blog.it is very nice..thanks..
Fantastic demo. Cool!
Brilliant!
@Scott,
Scott, I see no one answered your question about the bullets on each list item. I just now decided to try this design pattern out and had the same problem as you.
At any rate, the problem is the result of your CSS defining list-style-type for the ul/li elements. I added this to override the default behavior and to make the accordion CSS play nice:
.accordion ul li /* Otherwise, we get a bullet beside the elements in the listview */
{
list-style-type: none;
}
Please let me know if that doesn't fix your problem.
Matt:
(I speak very very few english.)
Good sample.
Help me please.
I need convert MailBoxItems.cs to MailBoxItems.vb.
Thank you!
Hi,matt
your original idea for Accordion Control use is very familar with mine.
but i found it's hard try in VS2005.is it necessary to be work with framework3.5?
or give me a demo in vs20005+framework2.0
thanks.
After playing with this sample for a while, I found that the AjaxControlToolkit Accordion control performs poorly. On the page that I used it, the more I clicked around on it, the slower it started to run.
At any rate, I replaced my AjaxControlToolkit controls with jQuery and various plug-ins.
I made a replica of what Matt made in this article using the jQuery plugin. I took it a step further, though. I made a custom web-service that will parse a SiteMap and return the hierarchy as JSON text. I use jQuery's $.ajax function to get the JSON data. Finally, I parse the data into HTML elements and then use the jQuery accordion plug-in to transform my HTML into the jQuery Accordion.
The benefit to parsing like this is that I don't require the ListView's and can generate the node's (IE Accordion panes) dynamically.
Since I am using the same CSS style, my jQuery accordion looks the exact same as Matt's (with icons and all). So far I am happy with the results and it appears to perform much better than what I was using previously. With the jQuery easing plugin, I am able to manipulate the animation a bit more as well.
Anyhow, I just wanted to share my experience. If anyone is interested in an example, let me know.
Thanks,
Stephen
smlong426@yahoo.com
Great Tool - but how do you actually get the list items to link to anything. I need some to link to URLs and other to kick off a bit of code.
Well, there are a number of ways that you can get the list items to link to something.
What I did for myself was to make a small method that parses a standard ASP.NET SiteMap (using Xpath's). For each LI, I have an ImageUrl, a LinkUrl, and a Description that I return. I use this "LinkUrl" as the target of a Javascript call I call ShowWebSite(Url).
In the binding, I add the reference to the "LinkUrl" in the binding Eval. Something like this:
I use a Javascript method because that way I can target an iframe as well without making any further code changes.
If you need a more complete example, let me know and I can email you a working demo, unless Matt wants to provide one.
Thanks,
Stephen
PS - see my previous post regarding recreating this with jQuery and its accordion plugin. This works much better than the AjaxControlToolkit / ListView combination.
Its is very VERY BAD! Than it is using ASP.NET!!!
The code of this control can be more than 100x smaller!
Also 500KB(ASP.NET)/100 = 5 KB of full control,if it is coded by self!