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)

image

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.

image

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

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 .

image   image

image

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.  

image 

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

image

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

image

  • 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

That's it.  Enjoy!


TrackBack

TrackBack URL for this entry:
http://mattberseth.com/blog-mt/mt-tb.fcgi/94

Listed below are links to weblogs that reference Creating an Outlook Navigation Bar using the ListView and Accordion Controls:

» Matt Berseth: Creating an Outlook Navigation Bar using the ListView and Accordion Controls from Rocking with Knowledge
Good Sample Creating an Outlook Navigation Bar using the ListView and Accordion Controls Matt Berseth: [Read More]

» Matt Berseth: Creating an Outlook Navigation Bar using the ListView and Accordion Controls from Rocking with Knowledge
Good Sample Creating an Outlook Navigation Bar using the ListView and Accordion Controls Matt Berseth: [Read More]

» Matt Berseth: Creating an Outlook Navigation Bar using the ListView and Accordion Controls from Rocking with Knowledge
Good Sample Creating an Outlook Navigation Bar using the ListView and Accordion Controls Matt Berseth: [Read More]

Comments


Looks nice but I cant get to the other sections with Javascript turned off.

Posted by: Webdroid on December 16, 2007 12:00 AM

>>Looks nice but I cant get to the other sections with Javascript turned off.


Duh!

This is a great example, thank you !

Posted by: Vish on December 17, 2007 12:00 AM

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.

Posted by: Dan on December 17, 2007 12:00 AM

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

Posted by: Bart Czernicki on December 17, 2007 12:00 AM

I did something very similar a couple weeks ago. Couple this with the DragPanelExtender and you have an nice little floating "toolbox".

Posted by: Dan on December 18, 2007 12:00 AM

This is great stuff! Do you have a download of the source code available?

Posted by: Suresh on December 18, 2007 12:00 AM

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.

Posted by: Stephen on December 18, 2007 12:00 AM

Is there an ASP.NET 2.0 alternative to the list view?

It really works in OPERA!!! :)

Posted by: Lans on December 20, 2007 12:00 AM

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 ..

Posted by: arthurlu on December 25, 2007 12:00 AM

so good

Posted by: Anonymous on December 29, 2007 12:00 AM

good article.thanks

Posted by: Gabriel Braun on January 19, 2008 12:00 AM

"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?

Posted by: Mutlyp on January 23, 2008 12:00 AM

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 ...

Posted by: Nitin Badole on February 8, 2008 12:00 AM

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

Posted by: PoulBao on February 13, 2008 12:00 AM

Like it very much!

Posted by: Louie on February 19, 2008 12:00 AM

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.

Posted by: Huong on April 3, 2008 12:00 AM

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

Posted by: vytheeswaran on April 11, 2008 12:00 AM

Anything similar in winforms will be very helpfull

Wooow..thanks for sharing.
This is very helpfull.

Posted by: Zubin on April 18, 2008 12:00 AM

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

Posted by: Scott on May 2, 2008 12:00 AM

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..

Posted by: Neil on July 22, 2008 12:00 AM

Fantastic demo. Cool!

Brilliant!

Posted by: Stephen on August 6, 2008 10:36 AM

@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.

Posted by: César on August 27, 2008 12:21 PM


Matt:


(I speak very very few english.)
Good sample.
Help me please.
I need convert MailBoxItems.cs to MailBoxItems.vb.
Thank you!

Posted by: wanax on September 4, 2008 08:56 PM

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.

Posted by: Stephen on September 5, 2008 04:18 PM

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

Posted by: Simon on September 6, 2008 08:36 PM

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.

Posted by: Stephen on September 19, 2008 09:03 AM

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:


  • )' onclick="ShowWebSite('')">

  • 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.

    Posted by: Jonny on October 4, 2008 12:23 PM

    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!

    Post a comment

    (If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

    Consulting Services

    Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

    Recent Comments

    • Jonny wrote: Its is very VERY BAD! Than it is using ASP.NET!!! The code of this control can be more than 100x sm...
    • Stephen wrote: Well, there are a number of ways that you can get the list items to link to something. What I did f...
    • Simon wrote: Great Tool - but how do you actually get the list items to link to anything. I need some to link to ...
    • Stephen wrote: After playing with this sample for a while, I found that the AjaxControlToolkit Accordion control pe...
    • wanax wrote: Hi,matt your original idea for Accordion Control use is very familar with mine. but i found it's har...
    • César wrote: Matt: (I speak very very few english.) Good sample. Help me please. I need convert MailBoxItems.c...
    • Stephen wrote: @Scott, Scott, I see no one answered your question about the bullets on each list item. I just now...
    • AstentyAbsep wrote: Brilliant!...