DotNet Snippets^1.0

The accordion control from the ajax control toolkit can be pretty nice for building Hierarchical structures. The accordion provides expand and collapse to preserve screen real estate and keep the view organized.

Lets start with the aspx side: Drag in your controls and make em look like this:

                     
                        <%# Eval("Date", "{0:yyyy}") %> 
                     
                     
                         
                         
                            
                                <%# Eval("Date", "{0:MMMM}")%> 
                            
                            
                                
                                
                                
                            
                         
                         
                     
                    
                    

Notice a few things: In this example we are using a dates based hierarchy, starting out with the years and coming down to the months and finally to the days in that month.
The outer Accordion pane, Accordion1, is databound to an object datasource that puts out a table with a column "Date".
The inner accordion is not databound to anything, it will be databound in the codebehind. This is because we need to pull that value from the hiddenField that will let us know what year/month we need to build the next accordion pane for.
At the end we just have a GridView that lists the final days in the archive for the selected month.

Now for the css that provides the look, alter this to get something different than the default view provided by microsoft.

.accordionHeader
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #2E4d7B;
	font-family: Arial, Sans-Serif;
	font-size: 12px;
	font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}
.accordionHeader a
{
	color: #FFFFFF;
	background: none;
	text-decoration: none;
}
.accordionHeader a:hover
{
	background: none;
	text-decoration: underline;
}

.accordionHeaderSelected
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #5078B3;
	font-family: Arial, Sans-Serif;
	font-size: 12px;
	font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}
.accordionHeaderSelected a
{
	color: #FFFFFF;
	background: none;
	text-decoration: none;
}

.accordionHeaderSelected a:hover
{
	background: none;
	text-decoration: underline;
}

.accordionContent
{
    background-color: #D3DEEF;
    border: 1px dashed #2F4F4F;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
}

Finally lets get to the codebehind, written in c-sharp of course:

protected void Accordion1_ItemDataBound(object sender, AjaxControlToolkit.AccordionItemEventArgs e)
    {
        IssuesData data = new IssuesData();

        if (e.ItemType == AjaxControlToolkit.AccordionItemType.Content)
        {
            AjaxControlToolkit.AccordionContentPanel contentPanel = e.AccordionItem;

            HiddenField yearHf = (HiddenField)contentPanel.FindControl("HiddenField1");

            AjaxControlToolkit.Accordion innerAccordion = (AjaxControlToolkit.Accordion)contentPanel.FindControl("AccordionMonths");
            innerAccordion.DataSource = data.LoadArchiveMonths(yearHf.Value);
            innerAccordion.DataBind();
        }


    }

    protected void AccordionMonths_ItemDataBound(object sender, AjaxControlToolkit.AccordionItemEventArgs e)
    {
        IssuesData data = new IssuesData();

        if (e.ItemType == AjaxControlToolkit.AccordionItemType.Content)
        {
            AjaxControlToolkit.AccordionContentPanel contentPanel = e.AccordionItem;

            HiddenField monthHf = (HiddenField)contentPanel.FindControl("HiddenFieldMonth");

            DateTime monthDate = Convert.ToDateTime(monthHf.Value);

            GridView datalist = (GridView)contentPanel.FindControl("GridViewDates");
            datalist.DataSource = data.LoadArchiveForMonth(monthDate.Month, monthDate.Year);
            datalist.DataBind();
        }
    
    }

Notice that these are the on row / item commands that get run during databinding. Note how we pull the hiddenfield value to then build the inner accordion pane with the right data, and further build the GridView with the right data.