Sunday 29 April 2012

AJAX Accordion Control

I couldn't see accordion control from the tool box.


You need add to this.
Mouse right button on toolbox => Add Tab => Chooose Items.. => .NET Framework componemts => Browse button => select AjaxControlToolkit.dll (this dll file you have to find on Internet, probably from http://ajaxcontroltoolkit.codeplex.com/)


Then you will see the accordion contols. From here look up youtube to find 'how to use accordion control' and you can add some controls. For me, when coding, the compiler asked me to use TookkitScriptManager instead of standard ScriptManager control.


Part of my code is here.



    <%--<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>--%>
        <ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </ajax:ToolkitScriptManager>


    <asp:UpdatePanel ID="updatepanel1" runat="server">
    <ContentTemplate>
 
    <ajax:Accordion ID="Accordion1" runat="server" SelectedIndex="0" FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250" AutoSize="None" >
        <Panes>
        <ajax:AccordionPane ID="AccordionPane1" runat="server">
            <Header>
                <a href="" onclick="return false;" >Section1</a>
            </Header>
            <Content>
                <asp:TextBox ID="tbRes1" runat="server"></asp:TextBox>
                <asp:Button ID="btnSection1" runat="server" Text="Button" />
            </Content>
            ...


And it looks like this.