Accordion pane ajax control

Question

1.00/5 (1 vote)

See more:

Button click event not raise in accordion control.

Plase help me

Below is my code

XML

<asp:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="AccodionHeader"
        SkinID="HeaderLabels" FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250"
        SuppressHeaderPostbacks="true" AutoSize="None" RequireOpenedPane="false">
        <panes>
            <asp:AccordionPane runat="server" ID="accordionPane1" Width="100%" >
            <Header><a href="" style=" background-color :Lime;height:22px;width:100%">1.Father</a></Header>
            <content>
            <table style="text-align:center">
            <tr>
                <td>
                    <asp:Label ID="lblFirstName" runat="server" Text="FirstName:">
                </td>
                <td></td>
                <td>
                    <asp:TextBox ID="txtFirstName" runat="server" MaxLength="50" ValidationGroup="FatherGroup">
                    </td>
                <td>
                    <asp:RequiredFieldValidator ID="valFirstName" ControlToValidate="txtFirstName"  ErrorMessage="*"
                    runat="server" ValidationGroup="FatherGroup" >
                </td>
                <td></td>
                <td>
                    <asp:Label ID="lblMiddleName" runat="server" Text="MiddleName:">
                </td>
                <td></td><td><asp:TextBox ID="txtMiddleName" runat="server" MaxLength="50" ></td>
                <td></td>
            </tr>
            <tr>
                <td>
                <asp:Label ID="lblLastName" runat="server" Text="LastName:"></td><td></td><td>
                <asp:TextBox ID="txtLastName" runat="server" MaxLength="50" ValidationGroup="FatherGroup">
                </td><td><asp:RequiredFieldValidator ID="ValLastName" ControlToValidate="txtLastName" ErrorMessage="*"
                runat="server" ValidationGroup="FatherGroup"></td><td></td><td><asp:Label ID="lblDateOfBirth" runat="server" Text="BirthDate:">
                </td><td></td>
                <td><asp:TextBox ID="txtBirthDate" runat="server" Width="90px" ValidationGroup="FatherGroup" ><asp:Image ID="imgBirthdate" runat="server" ImageUrl="~/images/ico_datepickerSmall.gif" />
                <asp:ImageButton ID="imgcleaBirthDate" runat="server"
                ImageUrl="~/images/date_clearSmall.gif" CausesValidation="false" /><asp:CalendarExtender ID="clnextndrBirthDate" runat="server"
                Format="MM/dd/yyyy" TargetControlID="txtBirthDate"
                PopupButtonID="imgBirthdate" ></td><td><asp:RequiredFieldValidator ID="valBirthDate" ControlToValidate="txtBirthDate"
                runat="server" ErrorMessage="*" ValidationGroup="FatherGroup" >
                <td><asp:CompareValidator ID="cmpBithDate" runat="server" ControlToValidate="txtBirthDate" Type="Date" Operator="LessThan"  ErrorMessage="Date Should not Greater than Today" Display="None" ValidationGroup="FatherGroup">
                <asp:ValidatorCalloutExtender ID="Vldtr_BirthDate" runat="server" TargetControlID="cmpBithDate">
                </td></td><td></td>
            </tr>
            <tr>
                <td>
                <asp:Label ID="lblEmail" runat="server" Text="EmailID:"></td>
                <td></td><td><asp:TextBox ID="txtEmailID" runat="server" MaxLength="50" ValidationGroup="FatherGroup"></td>
                <td>
                <asp:RequiredFieldValidator ID="valEmailID" ControlToValidate="txtEmailID" ErrorMessage="*"
                runat="server" ValidationGroup="FatherGroup"></td><td>
                <asp:RegularExpressionValidator id="REGEmailID" runat="server"  ControlToValidate="txtEmailID" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ErrorMessage="Invalid Email Id" Display="None" ValidationGroup="FatherGroup">
                </td>
                <td>
                <asp:Label ID="lblOccupation" runat="server" Text="Occupation:"></td><td></td><td>
                <asp:TextBox ID="txtOccupation" runat="server"   MaxLength="50" ValidationGroup="FatherGroup" >
                </td>
                <td><asp:RequiredFieldValidator ID="ValOccupation" ControlToValidate="txtOccupation"
                runat="server" ErrorMessage="*" ValidationGroup="FatherGroup"></td><td></td></tr>
                <tr><td><asp:Label ID="lblContactNo" runat="server" Text="ContactNo:">
                </td><td></td>
                <td><asp:TextBox ID="txtContactNo" runat="server" MaxLength="20" Height="22px" ValidationGroup="FatherGroup"></td><td>
                <asp:RequiredFieldValidator ID="valContactNo" ControlToValidate="txtContactNo" ErrorMessage="*"
                runat="server" ValidationGroup="FatherGroup" >
                </td>
                <td></td></tr><tr><td></td><td></td>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            </table>
            <table style="width:100%" cellpadding="0px" cellspacing="0px"><tr><td align="center"></td></tr>
            <tr style="text-align:center;">
                <td>
                    <asp:UpdatePanel ID="father" runat="server">
                    <%-- <triggers>
                    <asp:AsyncPostBackTrigger ControlID="FatherAdd" EventName="Click" />
                    </triggers>--%>
                    <contenttemplate>
                    <asp:Button ID="FatherAdd" runat="server" Text="Add"  ValidationGroup="FatherGroup" CausesValidation="true" />
                    <asp:Button ID="FatherUpdate" runat="server" Text="Update"  ValidationGroup="FatherGroup"  />
                    <asp:Button ID="FatherDelete" runat="server" Text="Delete" ValidationGroup="FatherGroup" />
                    <asp:Button ID="FatherReset" runat="server" Text="Cancel" ValidationGroup="FatherGroup" CausesValidation="False" />
                    </contenttemplate>
                </td>
            </tr>
            </table>
            </content>
            </panes>
        <asp:Label ID="lablmsg" runat="server">

Posted 5-Apr-11 20:59pm

Sejal Vachhani

Updated 6-Apr-11 0:16am

Ankur^\m/

v3

Add a Solution

Comments

Sunasara Imdadhusen 6-Apr-11 6:57am

Is it fire validation?

Sejal Vachhani 7-Apr-11 0:45am

yes validation fire successfully

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Prasad_Kulkarni · Accepted Answer · 2011-04-06T01:25:00

hi,
try out this one..

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Accordion Tips and Tricks</title>
    <style type="text/css">
        .accordionHeader
        {
            color: white;
            background-color: #719DDB;
            font: bold 11px auto "Trebuchet MS" , Verdana;
            font-size: 12px;
            cursor: pointer;
            padding: 4px;
            margin-top: 3px;
        }
        .accordionContent
        {
            background-color: #DCE4F9;
            font: normal 10px auto Verdana, Arial;
            border: 1px gray;
            padding: 4px;
            padding-top: 7px;
        }
    </style>
    <script type="text/javascript">
    function pageLoad()
    {
        //hideAccordionPane(1);
        //changeSelected(2);
        //var accCtrl = $find('<%= AccordionCtrl.ClientID %>'+'_AccordionExtender');
        //accCtrl.add_selectedIndexChanged(onAccordionPaneChanged);
        //AddPaneAtRuntime();
        // Prevent Pane 3 from expanding
        // RemoveHandlerAtRuntime(2);
        //AddMouseOverToAccordion();
    }

    function AddMouseOverToAccordion()
    {
        var acc = $find('AccordionCtrl_AccordionExtender');
        for(paneIdx = 0; paneIdx < acc.get_Count(); paneIdx++)
        {
            $addHandler(acc.get_Pane(paneIdx).header,"mouseover",acc._headerClickHandler);
        }
    }
    function RemoveHandlerAtRuntime(pane)
    {
         $removeHandler($find('AccordionCtrl_AccordionExtender').get_Pane(pane).header,"click",$find('AccordionCtrl_AccordionExtender')._headerClickHandler);
    }
    function AddPaneAtRuntime()
    {
        var newAccordion = $find("AccordionCtrl_AccordionExtender");
        var header = document.createElement("div");
        header.innerText = "Pane 5";
        header.className = "accordionHeader"; //set header css
        var content = document.createElement("div");
        content.innerText = "This pane was added using JavaScript";
        content.className = "accordionContent"; // set content css
        newAccordion.get_element().appendChild(header);
        newAccordion.get_element().appendChild(content);
        newAccordion.addPane(header,content);
    }
    // hides pane 1
    function hideAccordionPane(paneno)
    {
        $find('AccordionCtrl_AccordionExtender').get_Pane(paneno).header.style.display="none";
        $find('AccordionCtrl_AccordionExtender').get_Pane(paneno).content.style.display="none";
    }
    // expand given accordion pane
    function changeSelected(idx)
    {
        $find('AccordionCtrl_AccordionExtender').set_SelectedIndex(idx);
    }
    function onAccordionPaneChanged(sender, eventArgs)
    {
        var selPane = sender.get_SelectedIndex() + 1;
        alert('You selected Pane ' + selPane);
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <cc1:Accordion ID="AccordionCtrl" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
            ContentCssClass="accordionContent" AutoSize="None" FadeTransitions="true">
            <Panes>
                <cc1:AccordionPane ID="AccordionPane0" runat="server">
                    <Header>
                        Pane 1</Header>
                    <Content>
                        Objective is to provide information about property details like residential & commercial
                        to respected users. Users can list their property to sell & post their requirements
                        if they’re seeking to buy property. Everyone can easily accessible to all information
                        about Property. This website contains all updates about different properties. It
                        also gives information about specialized builders & agents. It gives property details
                        according to respected cities.
                    </Content>
                </cc1:AccordionPane>
                <cc1:AccordionPane ID="AccordionPane1" runat="server">
                    <Header>
                        Pane 2</Header>
                    <Content>
                        Hardware: Processor : P4 or above. HDD : 40GB or above. RAM : 256MB or above. Software:
                        Client Side : Windows 9x or later. Internet Explorer 5 or above. Server Side: Windows
                        NT. ISP account with domain name and reserved space.
                    </Content>
                </cc1:AccordionPane>
                <cc1:AccordionPane ID="AccordionPane2" runat="server">
                    <Header>
                        Pane 3</Header>
                    <Content>
                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                        fugiat nulla pariatur.
                    </Content>
                </cc1:AccordionPane>
                <cc1:AccordionPane ID="AccordionPane3" runat="server">
                    <Header>
                        Pane 4</Header>
                    <Content>
                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
                        mollit anim id est laborum.
                    </Content>
                </cc1:AccordionPane>
            </Panes>
        </cc1:Accordion>
    </div>
    </form>
</body>
</html>

c# code:

C#

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
    AccordionPane newAccordion = new AccordionPane();
    newAccordion.HeaderContainer.Controls.Add(new LiteralControl("Pane 5"));
    newAccordion.ContentContainer.Controls.Add(new
              LiteralControl("This pane was added using Code Behind"));
    AccordionCtrl.Panes.Add(newAccordion);
}
}