Ajax ASP .Net VII : Accordion Control and CollapsiblePanelExtender

First let's see Ajax in action.

The page is displaying Shalvin's content by default. Only headers of Site and Contact Info are visible.








When you click on Site and Blog header, it will show its contents and other contents are invisible as shown in the figure below.













Having seen the functionality lets try to implement it.
Working with Accordion is a bit tough in comparison to the controls I have already explained because you won't get a visual interface for working with Accordion and you have to work this control in source view.

If you are not familiar working with Asp .Net is source view visit my blog Asp .Net Introduction : Notepad way



















Inside the Accordion tag place a Panes tag. Inside Panes you can have AccodionPane. AccordionPane inturn have Header and Content. I have added a b tag for Header. In real time you have to use CSS for better look and feel.


Accordion Databinding

Accordion control would most likely be used in conjunction with database data.

Here I am creating an SqlDataSource Control that point to Northwind database's Suppliers table.

I am setting the DataSourceId property of Accordion to the SqlDataSource id and creating HeaderTemplate and ContentTemplate as shown below.

If you are not comfortable working with templated controls visit my blog Asp .net DataList.

Result

























Here I have made the header Bold and Underline. When you click on a header you can see the contents.










Adding CSS

CollapsiblePanelExtender

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

<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
CollapseControlID="Header"
ExpandControlID= "Header"
TargetControlID="Content">
</asp:CollapsiblePanelExtender>
</div>

<asp:Panel ID="Header" runat="server" Height="16px" Width="293px">
<u>Shalvin P D </u></asp:Panel>

<asp:Panel ID="Content" runat="server">
.Net Consultant and Corporate trainer<br /> Blog :shalvinpd.blogspot.com
</asp:Panel>

Related Blogs

Ajax .Net I : Extension Controls in Visual Studio 2008

Ajax .Net II : Setting up Ajax Control Toolkit controls

Ajax .Net III : CalendarExtender Control

Ajax .Net IV : TextBoxWaterMarkExtender

Ajax .Net V : FilteredTextBoxExtender

Ajax .Net VI : ConfirmButtonExtender