Written by: Steve Patterson
2/11/2010 3:32 PM 

Using the ASP.Net Ajax Accordion

It was suggested that we utilize the Ajax Accordion control in a recent project and although the software is easy to install finding decent documentation on a quick solution was not as simple. I did finally stumble upon a couple of examples and modified the code from them to come up with an easy way to implement an image based menu with the accordion style navigation.

The first thing to do is register the Ajax Control Kit in the page header.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit"%>

Place the Script Manage on the page itself or on the Master Page.Placing the Script Manager on the Master Page worked well in our case as multiple pages used Ajax .

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>        

The main body of code contains the Accordion definition, a Panes area, an Accordion Pane definition, a Header, a Content area, and closing tags. The unique thing that we did was to place an asp image object within the header group instead of text. Our content area also contained a user control but the links of the menu could have been created directly on the page just as well.

    <ajaxToolkit:Accordion ID="Accordion1" runat="server" FadeTransitions="True" 
    SelectedIndex="0" TransitionDuration="100"  HeaderCssClass="accordionHeader" 
    ContentCssClass="accordionContent" AutoSize="None" ToolTip="Something">
    <Panes> 
    <ajaxToolkit:AccordionPane id="AccordionPane5" runat="server">
    <Header><asp:Image runat="server" AlternateText="Some Text" ImageUrl="~/Images/Menu1.png" />    
    </Header>
    <Content>
    ...
    ... Links to Menu items.
    ...
    </Content>
    </ajaxToolkit:AccordionPane>
    </Panes> 
    </ajaxToolkit:Accordion>

Trackback Print

Tags:

Categories:

Location: Blogs CapturedTech - Technology

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code Enter the code shown above in the box below
Add Comment   Cancel