open a animated popup on button click in asp.net - asp.net

I have a problem when i m taking a button after close gridview then code is working but when i m taking a button within gridview then error is occured "System.InvalidOperationException: The TargetControlID of 'ModalPopupExtender1' is not valid. A control with ID 'btn_edit' could not be found." and my code is:
Code
autogeneratecolumns="False"
allowpaging="True"
PageSize="3"
width="500px"
ondatabound="CustomersGridView_DataBound"
runat="server" DataKeyNames="CompanyFName" CellPadding="4" ForeColor="#333333"
GridLines="None">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="CompanyFName" HeaderText="CompanyFName"
SortExpression="CompanyFName" />
<asp:BoundField DataField="CompanySName" HeaderText="CompanySName"
SortExpression="CompanySName" />
<asp:templatefield>
</Columns>
<EditRowStyle BackColor="#7C6F57" />
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<pagerstyle forecolor="White"
backcolor="#666666" HorizontalAlign="Center"/>
<pagertemplate>
<table width="100%">
<tr>
<td style="width:70%">
<asp:label id="MessageLabel"
forecolor="Blue"
text="Select a page:"
runat="server"/>
<asp:dropdownlist id="PageDropDownList"
autopostback="true"
onselectedindexchanged="PageDropDownList_SelectedIndexChanged"
runat="server"/>
</td>
<td style="width:70%; text-align:right">
<asp:label id="CurrentPageLabel"
forecolor="Blue"
runat="server"/>
</td>
</tr>
</table>
</pagertemplate>
<RowStyle BackColor="#E3EAEB" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F8FAFA" />
<SortedAscendingHeaderStyle BackColor="#246B61" />
<SortedDescendingCellStyle BackColor="#D4DFE1" />
<SortedDescendingHeaderStyle BackColor="#15524A" />
</asp:gridview>
<asp:AccessDataSource ID="AccessDataSource1" runat="server"
DataFile="~/eTimeTrackLite1.mdb"
SelectCommand="SELECT [CompanyFName], [CompanySName] FROM [Companies]">
</asp:AccessDataSource>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:Panel ID="Panel1" runat="server" BackColor="#990099" Height="146px"
Width="403px">
<asp:Button ID="Button2" runat="server" Text="Button" />
</asp:Panel>
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btn_edit" PopupControlID="Panel1" CancelControlID="Button2" X="280" Y="220">
<Animations>
<OnShowing>
<FadeIn Duration=".5" Fps="40" />
</OnShowing>
<OnShown>
<FadeIn Duration=".5" Fps="40" />
</OnShown>
<%-- neither animation works from code-behind --%>
<OnHiding>
<FadeOut Duration=".5" Fps="40" />
</OnHiding>
<OnHidden>
<FadeOut Duration=".5" Fps="40" />
</OnHidden>
</Animations>
</asp:ModalPopupExtender>

Related

UpdateProgress and UpdatePanel Inside Gridview Row

I have a Gridview with UpdateProgress, UpdatePanel and Linkbutton in gridview row TemplateField. When I click the Linkbutton, the UpdateProgress should work, but not in my case.
Here's the code:
<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
AutoGenerateColumns="False" BackColor="White" BorderColor="#CC9966"
BorderStyle="None" BorderWidth="1px" CellPadding="4" DataKeyNames="CustomerID"
onpageindexchanging="GridView1_PageIndexChanging" Width="500px"
onrowcommand="GridView1_RowCommand"
onrowdatabound="GridView1_RowDataBound">
<Columns>
<asp:BoundField DataField="CustomerID" HeaderText="Customer ID" />
<asp:BoundField DataField="CompanyName" HeaderText="Company" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:TemplateField>
<ItemTemplate>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel2" >
<ProgressTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/ajax-loader.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode= "Conditional" >
<ContentTemplate>
<asp:LinkButton ID="lbtnExecute" runat="server" CommandArgument="<%# ((System.Web.UI.WebControls.GridViewRow)(Container)).DataItemIndex + 1 %>"
CommandName="Execute">Execute</asp:LinkButton>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lbtnExecute" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
<PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
<RowStyle BackColor="White" ForeColor="#330099" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
<SortedAscendingCellStyle BackColor="#FEFCEB" />
<SortedAscendingHeaderStyle BackColor="#AF0101" />
<SortedDescendingCellStyle BackColor="#F6F0C0" />
<SortedDescendingHeaderStyle BackColor="#7E0000" />
</asp:GridView>
I tried removing the:
AssociatedUpdatePanelID="UpdatePanel2"
but UpdateProgress showed in all rows. I want it to show only on the row where I click the Linkbutton.
Can anyone help?

dropdownlist in a footer of gridview

I have asp grid view and i created 4 columns(Id,Name,quantity,price) and a footer. i have bounded all the 4 columns from the database. in the footer template, i added a dropdown list item.
every thing is working fine but, the problem is in the footer templalte dropdownlist is added after all the 4 columns but i want to add the dropdown footer to the 2nd column(Name).
Please apologise for my english n Help me
I used the following code:
<asp:GridView ID="gv_page2" runat="server" AutoGenerateColumns="False"
BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px"
CellPadding="3" ForeColor="Black" GridLines="Vertical" ShowFooter="True">
<AlternatingRowStyle BackColor="#CCCCCC" />
<FooterStyle BackColor="Black" />
<HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#808080" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#383838" />
<Columns>
<asp:BoundField DataField="PRO_ID" HeaderText="PRO_ID" />
<asp:BoundField DataField="NAME" HeaderText="NAME" ItemStyle-Width="100px"/>
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate> <asp:TextBox runat="server" Width="100px"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="PRICE" ItemStyle-Width="80px"/>
<asp:BoundField HeaderText="TOTAL_PRICE"/>
<asp:TemplateField>
<FooterTempenter code herelate >
<asp:DropDownList ID="ftrDDL" runat="server" DataTextField="PRO_ID" AppendDataBoundItems="true" DataSourceID="" Width="130px" EnableViewState="true" >
<asp:ListItem Text="SELECT ONE" Value=""></asp:ListItem>
</asp:DropDownList>
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
you need to modify the template of second column
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblName" Text='<%# Databinder.Eval(Container.DataItem,"Name") %>'
runat="server" Width="100px"></asp:Label></ItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="ftrDDL" runat="server" DataTextField="PRO_ID" AppendDataBoundItems="true"
DataSourceID="" Width="130px" EnableViewState="true">
<asp:ListItem Text="SELECT ONE" Value=""></asp:ListItem>
</FooterTemplate>
</asp:TemplateField>
I have not tested the code but this should work .Let me know if it did not work
Is it required you add the drop down list in the footer?
I would suggest adding the drop down to the Name column. The footer will always load last.
Use template filed for Name
<asp:GridView ID="gv_page2" runat="server" AutoGenerateColumns="False" BackColor="White"
BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" ForeColor="Black"
GridLines="Vertical" ShowFooter="True">
<AlternatingRowStyle BackColor="#CCCCCC" />
<FooterStyle BackColor="Black" />
<HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#808080" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#383838" />
<Columns>
<asp:BoundField DataField="PRO_ID" HeaderText="PRO_ID" />
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
</ItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="ftrDDL" runat="server" DataTextField="PRO_ID" AppendDataBoundItems="true"
DataSourceID="" Width="130px" EnableViewState="true">
</asp:DropDownList>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Width="100px"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="PRICE" ItemStyle-Width="80px">
<ItemStyle Width="80px"></ItemStyle>
</asp:BoundField>
<asp:BoundField HeaderText="TOTAL_PRICE" />
</Columns>
</asp:GridView>

Want to update only gridView but whole page is being refreshed

Please Help me out.... I am new to ASP.net programming..
I have a a main page and on that page i have a button Button1 , now on clicking that button a panel is supposed to popup.
<ajaxToolkit:ModalPopupExtender ID="modelPopupExtender1"
CancelControlID="Btcancel"
PopupControlID="Panel1" TargetControlID="Button1"
Drag="true" BackgroundCssClass="ModelPopupBG"
runat="server" DropShadow="True"
>
Now in Panel1 i have 2 image buttons. 1) to search out the entered data(i am using a textbox for entry) and fill the data into the gridview1 and 2) to cancel the popup.
<asp:Panel ID="Panel1" runat="server" >
<div class="HelloWorldPopup">
<div class="PopupBody">
<div class="PopupHeader" id="PopupHeader"><b ><p style="margin-top: 10px"> Selection Panel</p></b></div><div id="UpperBody">
<table border="1" runat="server">
<tr>
<th >
<asp:TextBox ID="entry" runat="server"></asp:TextBox></th><th>
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="dropdowns">
<asp:ListItem Text="Name" >
</asp:ListItem><asp:ListItem Text="Address" >
</asp:ListItem><asp:ListItem Text="Telephone">
</asp:ListItem></asp:DropDownList></th><th>
<asp:ImageButton ID="Btok" runat="server" onclick="Btok_Click" ImageUrl="~/images/isearch.png"/>
</th>
<th >
<asp:ImageButton ID="Btcancel" runat="server" ImageUrl="~/images/cancel.gif" />
</th>
</tr>
</table>
</div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
style="margin-top: 11px" BackColor="White" BorderColor="White"
BorderStyle="Ridge" BorderWidth="2px" CellPadding="3" CellSpacing="1"
GridLines="None" Width="100%" onselectedindexchanged="GridView1_SelectedIndexChanged" >
<Columns>
<asp:BoundField DataField="id" HeaderText="ID" Visible="False" />
<asp:BoundField DataField="name" HeaderText="Name" />
<asp:BoundField DataField="address" HeaderText="Address" />
<asp:BoundField DataField="telephone" HeaderText="Telephone" />
<asp:CommandField HeaderText="Select" ShowSelectButton="True" />
</Columns>
<FooterStyle BackColor="#C6C3C6" ForeColor="Black" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#E7E7FF" />
<PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#DEDFDE" ForeColor="Black" />
<SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#594B9C" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#33276A" />
</asp:GridView>
</div>
everything is fine but only problem i am facing is that the whole page is being refreshed instead of just the gridview1 while i just want to refresh the gridview1 data when i click on BtOk
I guess using updatePanel for that gridView can sort things out for me.. but don't know how ...
What should I do??
I think you have the answer - UpdatePanel (that's one approach)
<asp:UpdatePanel runat="server" ID="GridUpdatePanel">
<ContentTemplate>
<asp:GridViewID="GridView1" runat="server">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
Simply create an UpdatePanel tag, and put your GridView between the ContentTemplate

ASP gives this error message: Both DataSource and DataSourceID are defined on 'profileGridView'. Remove one definition

<code>
<asp:Content ID="manageProfileContent" runat="server" ContentPlaceHolderID="mainContentPlaceHolder">
<div class="Menu">
<asp:Label ID="manageProfileTitle" runat="server" Text="Manage Profile" />
</div>
<br />
<asp:Panel ID="manageProfileMessagePanel" runat="server">
<asp:Label ID="manageProfileMessageLabel" runat="server" Font-Names="Sans-serif" Font-Size="Medium" Font-Bold="true" ForeColor="Red" Text="" />
</asp:Panel>
<br />
<asp:GridView ID="profileGridView" runat="server" AutoGenerateColumns="False"
BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px"
CellPadding="3" ForeColor="Black" GridLines="Vertical"
DataKeyNames="userid" DataSourceID="profileGridViewSqlDataSource">
<FooterStyle BackColor="#CCCCCC" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="#CCCCCC" />
<Columns>
<asp:BoundField DataField="userid" HeaderText="userid" ReadOnly="True"
SortExpression="userid" />
<asp:CheckBoxField DataField="administrator" HeaderText="administrator"
SortExpression="administrator" />
<asp:CheckBoxField DataField="policy_originator" HeaderText="policy_originator"
SortExpression="policy_originator" />
<asp:CheckBoxField DataField="policy_approver" HeaderText="policy_approver"
SortExpression="policy_approver" />
<asp:CheckBoxField DataField="employee" HeaderText="employee"
SortExpression="employee" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="profileGridViewSqlDataSource" runat="server"
ConnectionString="<%$ ConnectionStrings:policymgmConnectionString %>"
SelectCommand="SELECT [userid], [administrator], [policy_originator], [policy_approver], [employee] FROM [tbl_profile]">
</asp:SqlDataSource>
</asp:Content>
</code>
Do not specify profileGridView.Datasource = datatable; profileGridView.DataBind(); when you have already specified datasourceid for the gridview. As the error clearly says, either remove datasourceid for the gridview or the lines profileGridView.Datasource = datatable; profileGridView.DataBind(); from your code!

UpdatePanelAnimationExtender - Resize not working

This is the page that I'm having. But the resize part in the section does not seem to be working. I copied most of the code from the Ajax site. I placed a alert() in the tag (line 108) to find the value of 'b._originalHeight' and it shows up as '44'. I have also tried the code in the above-said tutorial (line 132) and that did not work either. (I'm not sure where it is getting this value from. But I need it to show all the controls on the form.
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="AddEditContest.ascx.cs" Inherits="TMPInternational.Spawn2DotComAdmin.Contest.UserControls.AddEditContest" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="uc" %>
<%# Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<%# Register TagPrefix="ew" Assembly="eWorld.UI, Version=1.9.0.0, Culture=neutral, PublicKeyToken=24d65337282035f2" Namespace="eWorld.UI" %>
<h1 style="margin-left:8px">Add/Edit Contest</h1>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
<div style="text-align:left;width:500px; margin-left:8px">
<div id="PanelContainer">
<asp:UpdatePanel ID="AddEditContestUpdatePanel" runat="server" UpdateMode="Always">
<ContentTemplate>
<div id="background" style="text-align:left; height: 44px;">
<asp:Panel ID="ContestList" runat="server">
<asp:datagrid AllowSorting="false" id="ContestGrid" GridLines="None" CellPadding="5"
Width="100%" AutoGenerateColumns="False" AlternatingItemStyle-BackColor="#cccccc"
HeaderStyle-Font-Size="15px" HeaderStyle-Font-Bold="true" HeaderStyle-BackColor="#888f9b"
Runat="server" AllowPaging="True" PageSize="10"
PagerStyle-NextPageText="Next >>" PagerStyle-PrevPageText="<< Back" >
<Columns>
<asp:HyperLinkColumn DataNavigateUrlField="ContestID" DataNavigateUrlFormatString="../?Load=AddEditContest&Type=Edit&ContestID={0}"
DataTextField="Title" ItemStyle-width="30%" headertext="Contest Title" />
<asp:BoundColumn DataField="StartDate" ItemStyle-Width="35%" HeaderText="Start Date" />
<asp:BoundColumn DataField="EndDate" ItemStyle-Width="35%" HeaderText="End Date" />
</Columns>
</asp:datagrid>
<div style="text-align:right;">
<asp:ImageButton ID="AddContest" runat="server"
ImageUrl="~/Contest/Images/Add.png" AlternateText="Add Contest"
onclick="AddContest_Click" />
</div>
</asp:Panel>
<asp:Panel ID="FieldsPanel" runat="server">
<p /><b>Title</b>
<br />
<asp:TextBox Runat="server" id="TitleText" />
<asp:RequiredFieldValidator id="TitleValidator" runat="server" ForeColor="Red"
ErrorMessage="Please add a title" ControlToValidate="TitleText">*</asp:RequiredFieldValidator>
<p /><b>Contest Description</b>
<br />
Use HTML tags to format this area. Start paragraphs with
<p /> tag, bold items with <b></b> tags. Create a
line-break between lines with one <br /> tag.<br />
<asp:TextBox Runat="server" ID="DescriptionText" TextMode="MultiLine" Width="400" Height="200" />
<asp:RequiredFieldValidator id="DescriptionValidator" runat="server" ErrorMessage="Please add a description"
ControlToValidate="DescriptionText" ForeColor="Red">*</asp:RequiredFieldValidator>
<p />
<b>Contest Start Date</b>
<br />
<ew:CalendarPopup id="StartDate" runat="server" Text="Change Date" Width="75px" MonthYearArrowImageUrl="~/Images/monthchange.gif"
CalendarLocation="Left" ControlDisplay="TextBoxImage" ImageUrl="~/Images/calendar.gif" MonthYearPopupApplyText="Select"
CalendarWidth="150" UseExternalResource="True" ExternalResourcePath="~/Scripts/CalendarPopup.js" Nullable="False">
<WeekdayStyle Font-Names="Arial" ForeColor="Black" BackColor="White" Font-Size="9pt" />
<MonthHeaderStyle Font-Size="9pt" Font-Names="Arial" Font-Bold="True" ForeColor="White" BackColor="#669AC1" />
<OffMonthStyle ForeColor="Gray" BackColor="White" Font-Size="9pt" />
<GoToTodayStyle Font-Names="Arial" ForeColor="Black" BackColor="White"/>
<TodayDayStyle Font-Bold="True" ForeColor="#669AC1" BackColor="White" />
<DayHeaderStyle Font-Size="9pt" Font-Names="Arial" Font-Bold="True" ForeColor="Blue" BackColor="White" />
<WeekendStyle Font-Names="Arial" ForeColor="Blue" BackColor="LightGray" Font-Size="9pt" />
<SelectedDateStyle Font-Bold="True" ForeColor="White" BackColor="#669AC1" Font-Size="9pt"/>
<HolidayStyle Font-Names="Arial" ForeColor="Black" BackColor="White" />
</ew:CalendarPopup>
<ew:TimePicker id="StartTime" runat="server" ControlDisplay="TextboxImage" Text="Change Time"
ImageUrl="~/Images/clock.gif" NumberOfColumns="4" Scrollable="True" Width="75px">
<TimeStyle ForeColor="Blue" BackColor="White" Font-Size="9pt" />
<SelectedTimeStyle ForeColor="Blue" BackColor="Gray" />
</ew:TimePicker>
<p/><b>Contest End Date</b>
<br />
<ew:CalendarPopup id="EndDate" runat="server" Text="Change Date" Width="75px" MonthYearArrowImageUrl="~/Images/monthchange.gif"
CalendarLocation="Left" ControlDisplay="TextBoxImage" ImageUrl="~/Images/calendar.gif" MonthYearPopupApplyText="Select"
CalendarWidth="150" UseExternalResource="True" ExternalResourcePath="~/Scripts/CalendarPopup.js" Nullable="False">
<WeekdayStyle Font-Names="Arial" ForeColor="Black" BackColor="White" Font-Size="9pt" />
<MonthHeaderStyle Font-Size="9pt" Font-Names="Arial" Font-Bold="True" ForeColor="White" BackColor="#669AC1" />
<OffMonthStyle ForeColor="Gray" BackColor="White" Font-Size="9pt" />
<GoToTodayStyle Font-Names="Arial" ForeColor="Black" BackColor="White"/>
<TodayDayStyle Font-Bold="True" ForeColor="#669AC1" BackColor="White" />
<DayHeaderStyle Font-Size="9pt" Font-Names="Arial" Font-Bold="True" ForeColor="Blue" BackColor="White" />
<WeekendStyle Font-Names="Arial" ForeColor="Blue" BackColor="LightGray" Font-Size="9pt" />
<SelectedDateStyle Font-Bold="True" ForeColor="White" BackColor="#669AC1" Font-Size="9pt"/>
<HolidayStyle Font-Names="Arial" ForeColor="Black" BackColor="White" />
</ew:CalendarPopup>
<ew:TimePicker id="EndTime" runat="server" ControlDisplay="TextboxImage" Text="Change Time"
ImageUrl="~/Images/clock.gif" NumberOfColumns="4" Scrollable="True" Width="75px">
<TimeStyle ForeColor="Blue" BackColor="White" Font-Size="9pt" />
<SelectedTimeStyle ForeColor="Blue" BackColor="Gray" />
</ew:TimePicker>
<p />
<asp:ImageButton ID="SaveContestButton" runat="server" AlternateText="Confirm"
ImageUrl="~/Contest/Images/Confirm.png" onclick="SaveContestButton_Click" />
</asp:Panel>
<br />
<asp:Label ID="MessageLabel" runat="server" />
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="SaveContestButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
<uc:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server" TargetControlID="AddEditContestUpdatePanel">
<Animations>
<OnUpdating>
<Sequence>
<%-- Store the original height of the panel --%>
<ScriptAction Script="var b = $find('animation'); b._originalHeight = b._element.offsetHeight;" />
<%-- Disable all the controls --%>
<Parallel duration="0">
<EnableAction AnimationTarget="SaveDefaultDescriptionButton" Enabled="false" />
</Parallel>
<StyleAction Attribute="overflow" Value="hidden" />
<%-- Do each of the selected effects --%>
<Parallel duration=".25" Fps="30">
<FadeOut AnimationTarget="PanelContainer" minimumOpacity=".2" />
<Resize Height="0px" />
</Parallel>
</Sequence>
</OnUpdating>
<OnUpdated>
<Sequence>
<%-- Do each of the selected effects --%>
<Parallel duration=".25" Fps="30">
<FadeIn AnimationTarget="PanelContainer" minimumOpacity=".2" />
<Length duration="2" fps="40" Property="style" PropertyKey="height"
StartValue="10" EndValueScript="$get('animation').offsetHeight"
AnimationTarget="animation" />
<%--Also tried the below
<Resize HeightScript="$find('animation')._originalHeight" />
--%>
</Parallel>
<%-- Enable all the controls --%>
<Parallel duration="0">
<EnableAction AnimationTarget="SaveDefaultDescriptionButton" Enabled="true" />
</Parallel>
</Sequence>
</OnUpdated>
</Animations>
</uc:UpdatePanelAnimationExtender>
</div>
After watching Joe Stagner's video, I too tried to implement the ASP.NET AJAX UpdatePanelAnimation Extender, and I too had difficulty implementing the resize animation.
My problem was the following:
I didn't add a System.Threading.Thread.Sleep(1000) statement to the server-side event handler.
Your code example doesn't include your code-behind, so this may be your problem.
Here's another guess:
It might help if you specify the 'AnimationTarget' attribute on the 'Resize' tags.
<Resize AnimationTarget="PanelContainer" Height="0px" />
{...}
<Resize AnimationTarget="PanelContainer" HeightScript="$find('animation')._originalHeight" />
I'm not sure if this is the only thing--this is only the first thing that jumped out to me: But according to the reference docs, your <Resize Height="0px" /> tag should instead be <Resize Height="0" Unit="px" />.
Why is the second <Parallel> Duration shorter then the <Length> Duration?Sorry, not really an answer, just some notes of possible issues I see at first glance.

Resources