Advertisement

06.18.2008 at 02:33PM PDT, ID: 23496989 | Points: 500
[x]
Attachment Details

UpdatePanelAnimationExtender - Resize not working

Asked by TMPSupport in Asynchronous Javascript and XML (AJAX), JavaScript, WebApplications

Tags: , , ,

Hi,

This is the page that I'm having. But the resize part in the <OnUpdated> section does not seem to be working. I copied most of the code from the Ajax site (http://www.asp.net/ajax/ajaxcontroltoolkit/samples/UpdatePanelAnimation/UpdatePanelAnimation.aspx). I placed a alert() in the <ScriptAction> 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. Please help.

Tata
ArunStart Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:

<%@ 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 
						    &lt;p /&gt; tag, bold items with &lt;b&gt;&lt;/b&gt; tags. Create a 
						    line-break between lines with one &lt;br /&gt; 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>
		                &nbsp;
                        <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>
		                &nbsp;
                        <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>
 
Keywords: UpdatePanelAnimationExtender - Resi…
Title
1 Resizing a form
2 Screen Resizer?
3 resize iFrame without reloading ASP.…
4 Datagridview resize when form is resi…
5 Resize Image in C#
6 Interesting Resize form problem
 
Loading Advertisement...
 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628