I am using an asp:menu control to display a menu. It uses a SiteMapDataSource for it's data.
I would like to see make the top two level static and the other levels appear if the mouse hover's over them.
Here is the code.
<asp:Menu ID="Menu1" runat="server" BackColor="#000000" DataSourceID="SiteMapDataSource" DynamicHorizontalOffset="0" Font-Names="Verdana" Font-Size="Small" ForeColor="#ffffff">
<StaticSelectedStyle BackColor="#000000" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#284E98" ForeColor="#FFFFFF" />
<DynamicMenuStyle BackColor="#000000" />
<DynamicSelectedStyle BackColor="#000000" BorderStyle="Double" />
<DynamicMenuItemStyle BackColor="#000000" HorizontalPadding="5px"
VerticalPadding="2px" />
<StaticHoverStyle BackColor="#000000" ForeColor="White" />
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource" runat="server" />
Is there any way to do such a thing?
Try setting StaticDisplayLevels
<asp:Menu ID="Menu1" StaticDisplayLevels="2" runat="server" BackColor="#000000" DataSourceID="SiteMapDataSource" DynamicHorizontalOffset="0" Font-Names="Verdana" Font-Size="Small" ForeColor="#ffffff">
Related
When i Click add button My Grid is shacking.
the Button Id is="AddNewUnit"
If i click Add or Edit button my grid is shrinking and suddenly comeback to normal size for 1st time only.
If the page is refresh again same problem is doing.
I dont know how to solve the problem.
If any body know the problem. Let me know.
<dx:ASPxCallbackPanel runat="server" ID="CallbackPanel" ClientInstanceName="CallbackPanel" >
<PanelCollection>
<dx:PanelContent ID="PanelContent3" runat="server">
<dx:ASPxButton ID="AddNewUnit" ClientInstanceName="AddNewUnit" runat="server" Text="Add New" OnInit="AddNewUnit_Init" Image-Url="~/App_Themes/Images/add.png"
AutoPostBack="false">
<ClientSideEvents Click="function(s, e) {Grdview.AddNewRow(); }" />
<Image Url="~/App_Themes/Images/add.png"></Image>
</dx:ASPxButton>
<dx:ASPxLabel ID="lblindex" ClientInstanceName="lblindex" runat="server" ClientVisible="false"></dx:ASPxLabel>
<dx:ASPxGridView ID="Grdview" ClientInstanceName="Grdview" runat="server" OnRowDeleting="Grdview_RowDeleting"
KeyFieldName="Id" AutoGenerateColumns="False" Width="100%" OnRowInserting="Grdview_RowInserting"
OnRowUpdating="Grdview_RowUpdating" OnCellEditorInitialize="Grdview_CellEditorInitialize">
<ClientSideEvents CustomButtonClick="custombuttonclicks" />
<Columns>
<dx:GridViewCommandColumn VisibleIndex="0" Caption="Edit" Width="6%" Name="EditButton" ShowEditButton="true">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Font-Bold="True"></HeaderStyle>
<CellStyle HorizontalAlign="Center" VerticalAlign="Middle"></CellStyle>
</dx:GridViewCommandColumn>
<dx:GridViewCommandColumn ShowNewButton="true" Name="Delete" ShowEditButton="false" VisibleIndex="1" ButtonType="Image"
Width="6%" Caption="Delete">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Font-Bold="True"></HeaderStyle>
<CellStyle HorizontalAlign="Center" VerticalAlign="Middle"></CellStyle>
<CustomButtons>
<dx:GridViewCommandColumnCustomButton ID="deluser">
<Image ToolTip="Delete" Url="App_Themes/Images/delete.png" Width="22px" Height="22px" />
</dx:GridViewCommandColumnCustomButton>
</CustomButtons>
<HeaderStyle Wrap="True" Font-Bold="True"></HeaderStyle>
</dx:GridViewCommandColumn>
<dx:GridViewDataTextColumn FieldName="Name" VisibleIndex="1" Width="14%" Settings-AutoFilterCondition="Contains"
Caption="Name">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Font-Bold="True"></HeaderStyle>
<CellStyle HorizontalAlign="Left" VerticalAlign="Middle"></CellStyle>
<PropertiesTextEdit Width="250px">
<ValidationSettings ErrorDisplayMode="Text" ErrorTextPosition="Bottom">
<RequiredField IsRequired="True" ErrorText="Please enter the Name"></RequiredField>
</ValidationSettings>
</PropertiesTextEdit>
<Settings AutoFilterCondition="Contains"></Settings>
<EditFormSettings VisibleIndex="0" Caption="Name" />
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="Age" Caption="Age" VisibleIndex="2" Width="10%" PropertiesTextEdit-MaxLength="50"
HeaderStyle-Font-Bold="true" CellStyle-HorizontalAlign="Left" PropertiesTextEdit-ValidationSettings-RequiredField-ErrorText="Please enter the No. Of Beds"
Settings-AutoFilterCondition="Contains">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Font-Bold="True"></HeaderStyle>
<CellStyle HorizontalAlign="Right" VerticalAlign="Middle"></CellStyle>
<PropertiesTextEdit Width="250px" ValidationSettings-ErrorDisplayMode="Text">
<Style HorizontalAlign="Right">
</Style>
<ValidationSettings ErrorTextPosition="Bottom">
<RequiredField IsRequired="true" />
<RegularExpression ValidationExpression="^\d*\.?\d*$" ErrorText="Age accepts only numbers" />
</ValidationSettings>
</PropertiesTextEdit>
<EditFormSettings VisibleIndex="2" Caption="Age" />
</dx:GridViewDataTextColumn>
<dx:GridViewDataMemoColumn FieldName="Country" Width="35%" VisibleIndex="3" Caption="Country"
Settings-AutoFilterCondition="Contains">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Font-Bold="True"></HeaderStyle>
<CellStyle HorizontalAlign="Left" VerticalAlign="Middle"></CellStyle>
<PropertiesMemoEdit Height="50px" Width="250px">
<ValidationSettings ErrorDisplayMode="Text" ErrorTextPosition="Bottom">
<RequiredField IsRequired="True" ErrorText="Please enter the Country" />
</ValidationSettings>
</PropertiesMemoEdit>
<EditFormSettings VisibleIndex="3" Caption="Country" />
</dx:GridViewDataMemoColumn>
<dx:GridViewDataMemoColumn FieldName="State" Width="35%" VisibleIndex="4" Caption="State"
Settings-AutoFilterCondition="Contains">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Font-Bold="True"></HeaderStyle>
<CellStyle HorizontalAlign="Left" VerticalAlign="Middle"></CellStyle>
<PropertiesMemoEdit Height="50px" Width="250px">
<ValidationSettings ErrorDisplayMode="Text" ErrorTextPosition="Bottom">
<RequiredField IsRequired="True" ErrorText="Please enter the State" />
</ValidationSettings>
</PropertiesMemoEdit>
<EditFormSettings VisibleIndex="4" Caption="State" />
</dx:GridViewDataMemoColumn>
</Columns>
<SettingsCommandButton ApplyFilterButton-ButtonType="Button" ApplyFilterButton-Styles-FocusRectStyle-VerticalAlign="Middle">
<EditButton ButtonType="Image" Image-Height="24px" Image-Width="24px" Image-Url="App_Themes/Images/blueedit.png" Image-ToolTip="Edit">
<Image ToolTip="Edit" Height="24px" Width="24px" Url="App_Themes/Images/blueedit.png"></Image>
</EditButton>
<CancelButton ButtonType="Button" Styles-Style-VerticalAlign="Middle" Styles-Style-HorizontalAlign="Center" Image-ToolTip="Close Edit Form Without Saving Changes" Image-Width="60px">
<Image ToolTip="Close Edit Form Without Saving Changes" Width="60px"></Image>
<Styles>
<Style HorizontalAlign="Center" VerticalAlign="Middle"></Style>
</Styles>
</CancelButton>
<ShowAdaptiveDetailButton ButtonType="Image"></ShowAdaptiveDetailButton>
<HideAdaptiveDetailButton ButtonType="Image"></HideAdaptiveDetailButton>
<ApplyFilterButton ButtonType="Button" RenderMode="Button">
<Styles>
<FocusRectStyle VerticalAlign="Middle"></FocusRectStyle>
</Styles>
</ApplyFilterButton>
<UpdateButton ButtonType="Button" Styles-Style-VerticalAlign="Middle" Styles-Style-HorizontalAlign="Center" Image-ToolTip="Saving Changes." Image-Width="60px">
<Image ToolTip="Saving Changes." Width="60px"></Image>
<Styles>
<Style HorizontalAlign="Center" VerticalAlign="Middle"></Style>
</Styles>
</UpdateButton>
</SettingsCommandButton>
<SettingsEditing EditFormColumnCount="2" Mode="PopupEditForm">
</SettingsEditing>
<SettingsPager Mode="ShowPager" AlwaysShowPager="true" PageSize="10" Position="Bottom">
<PageSizeItemSettings Visible="true" Caption="Units to display" Items="5, 10, 25, 50" />
</SettingsPager>
<Settings ShowFilterRow="true" ShowFilterRowMenu="true" VerticalScrollBarMode="Visible" VerticalScrollableHeight="432" />
<SettingsPopup>
<EditForm Width="760px" HorizontalAlign="WindowCenter" VerticalAlign="WindowCenter" Modal="true" />
</SettingsPopup>
<Settings ShowTitlePanel="false" />
<SettingsText Title="Add New" PopupEditFormCaption="Edit" />
</dx:ASPxGridView>
</dx:PanelContent>
</PanelCollection>
</dx:ASPxCallbackPanel>
<dx:ASPxPopupControl ID="PopupforCustDeletePopupSubmitConfirmation" runat="server" ShowPageScrollbarWhenModal="true" PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter" ClientInstanceName="PopupforCustDeletePopupSubmitConfirmation" AllowDragging="false" AllowResize="false" HeaderText="Alert"
EnableHotTrack="False" HeaderStyle-Font-Bold="true" CloseAction="CloseButton" Modal="True" HeaderStyle-HorizontalAlign="Left">
<ContentCollection>
<dx:PopupControlContentControl ID="PopupControlContentControl1" runat="server">
<dx:ASPxPanel ID="ASPxPanel1" runat="server" DefaultButton="btOK">
<PanelCollection>
<dx:PanelContent ID="PanelContent2" runat="server">
<table style="width: 400px">
<tr>
<td align="center">
<dx:ASPxLabel ID="lblCustDeletePopupConfirmationMsg" ViewStateMode="Disabled" runat="server" Text="Are you sure you want to delete the Unit?">
</dx:ASPxLabel>
</td>
</tr>
</table>
</dx:PanelContent>
</PanelCollection>
</dx:ASPxPanel>
<br />
<br />
<table style="width: 100px; margin: auto;">
<tr>
<td align="center" style="width: 50px">
<dx:ASPxButton ID="btnCustDeletePopupYes" runat="server" Text="Yes" Width="55px" AutoPostBack="false" ToolTip="Yes">
<ClientSideEvents Click="CustDeletePopupYes_Click" />
</dx:ASPxButton>
</td>
<td align="center" style="width: 49px; padding-left: 5px;">
<dx:ASPxButton ID="btnCustDeletePopupNo" runat="server" Text="No" AutoPostBack="false" Width="55px" ToolTip="No">
<ClientSideEvents Click="CustDeletePopupNo_Click" />
</dx:ASPxButton>
</td>
</tr>
</table>
</dx:PopupControlContentControl>
</ContentCollection>
<HeaderStyle>
<Paddings PaddingRight="6px"></Paddings>
</HeaderStyle>
<SizeGripImage Height="16px" Width="16px">
</SizeGripImage>
</dx:ASPxPopupControl>
My Screenshot attached Here
<dx:ASPxFormLayout ID="ASPxFormLayout1" runat="server"></dx:ASPxFormLayout>
<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server"></dx:ASPxPopupControl>
before aspxcallbackpanel paste it never shake.
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
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>
I have a tree view control that I would like to supply the background image for. My code currently looks like this:
<asp:Image ImageUrl="~/images/mypic.gif" runat="server" Width="150px" />
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"
ImageSet="Arrows">
<ParentNodeStyle Font-Bold="False" />
<HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
<SelectedNodeStyle Font-Underline="True"
HorizontalPadding="0px" VerticalPadding="0px" ForeColor="#5555DD" />
<NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black"
HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />
</asp:TreeView>
there is a property of the treeview CssClass that you can give it an image via css
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"
CssClass="classname" ImageSet="Arrows">
<ParentNodeStyle Font-Bold="False" />
<HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
<SelectedNodeStyle Font-Underline="True"
HorizontalPadding="0px" VerticalPadding="0px" ForeColor="#5555DD" />
<NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black"
HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />
</asp:TreeView>
then in css
.classname
{
background-image: url('image path');
}
I would think the best way to achieve this would be to use CSS. I do not know off the top of my head what sort of html the TreeView control spits out but if it is a block element you should be able to set the background property to display your image.
An easy way to do this would be to surround your Treeview in a <div> block and set the css styling on this.
<div id="treeNav">
<asp:TreeView .........
</asp:TreeView>
</div>
#treeNav
{
background-image: url(my-image.png);
}
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.