i have gridpanel in my page and i want to expand it (somthing like height=100%) but i can't find any property that can use
this is my code
this is my code :
<ext:Panel runat="server" ID="pnlEest">
<Body>
<div>
<ext:FitLayout ID="FitLayout1" runat="server">
<ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" >
<TopBar>
<ext:Toolbar ID="ToolBar1" runat="server">
<Items>
<ext:Button ID="BtnInsert" runat="server" Text="Insert" IconCls="Button_Add">
<AjaxEvents>
<Click OnEvent="BtnInsert_Click">
<EventMask ShowMask="true" />
</Click>
</AjaxEvents>
</ext:Button>
<ext:Button ID="BtnUpdate" runat="server" Text="Update" IconCls="Button_Add">
<Listeners>
<Click Handler="#{GridPanel1}.reload();" />
</Listeners>
</ext:Button>
<ext:Button ID="BtnDelete" runat="server" Text="Delete" IconCls="Button_Add">
<Listeners>
<Click Handler="#{GridPanel1}.reload();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:RowNumbererColumn />
<ext:Column ColumnID="IDField" DataIndex="Id" Header="Id" Sortable="true" Width="50"
Hidden="true">
<PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False">
</PrepareCommand>
<PrepareCommands Handler="" Args="grid,commands,record,row,col,value" FormatHandler="False">
</PrepareCommands>
</ext:Column>
<ext:Column DataIndex="LocalName" Header="LocalName" Sortable="true" Width="120">
<PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False">
</PrepareCommand>
<PrepareCommands Handler="" Args="grid,commands,record,row,col,value" FormatHandler="False">
</PrepareCommands>
</ext:Column>
<ext:Column DataIndex="LatinName" Header="LatinName" Sortable="true" Width="120">
<PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False">
</PrepareCommand>
<PrepareCommands Handler="" Args="grid,commands,record,row,col,value" FormatHandler="False">
</PrepareCommands>
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
<LoadMask ShowMask="true" />
<BottomBar>
<ext:PagingToolbar Cls="DataGrid_Footer" ID="PagingToolBar1" runat="server" DisplayInfo="True"
DisplayMsg="Documents {0} - {1} OF {2}" PageSize="2" StoreID="Store1" />
</BottomBar>
</ext:GridPanel>
</ext:FitLayout>
</div>
</Body>
</ext:Panel>
i solved this with add
<ext:ViewPort runat="server" Cls="test">
<Body>
<ext:FitLayout ID="FitLayout1" runat="server" >
instead of
<ext:Panel runat="server" ID="pnlEest">
<Body>
<div>
<ext:FitLayout ID="FitLayout1" runat="server">
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.
I am implementing the functionality that on button click the data saved in the gridview should get exported on the button click, I implemented the functionality from here.
But I am getting error as Control 'mainContent_grdTeacherProfile' of type 'GridView' must be placed inside a form tag with runat=server at line
grdTeacherProfile.RenderControl(hw);
Please see the asps code of the gridview:-
<asp:GridView ID="grdTeacherProfile"
runat="server"
Width="100%"
border="1" Style="border: 1px solid #E5E5E5;"
CellPadding="3" FooterStyle-BackColor="#e3e3e3"
AutoGenerateColumns="false"
AllowPaging="true"
CssClass="hoverTable"
DataKeyNames="Id"
PageSize="4"
ShowFooter="false"
OnPreRender="PreRenderGrid"
HeaderStyle-CssClass="k-grid td"
OnDataBound="grdTeacherProfile_DataBound"
OnPageIndexChanging="grdTeacherProfile_PageIndexChanging"
OnRowDeleting="grdTeacherProfile_RowDeleting"
OnRowCommand="grdTeacherProfile_RowCommand"
EnableSortingAndPagingCallbacks="false"
EmptyDataText="No records found">
<AlternatingRowStyle CssClass="k-alt" />
<Columns>
<asp:TemplateField HeaderText="Select" ItemStyle-Width="5" >
<ItemTemplate>
<asp:CheckBox ID="chkDelete" runat="server" onClick="Check_Click(this)" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="first_name" HeaderText="First Name" ItemStyle-Width="30" />
<asp:BoundField DataField="last_name" HeaderText="Last Name" ItemStyle-Width="30" />
<asp:BoundField DataField="dob" HeaderText="Date of Birth" ItemStyle-Width="20" ApplyFormatInEditMode="true" DataFormatString="{0:d}" />
<asp:BoundField DataField="gender" HeaderText="Gender" ItemStyle-Width="20" />
<asp:BoundField DataField="designation" HeaderText="Designation" ItemStyle-Width="20" />
<asp:BoundField DataField="joining_date" HeaderText="Joining Date" ItemStyle-Width="20" ApplyFormatInEditMode="true" DataFormatString="{0:d}" />
<asp:BoundField DataField="leaving_date" HeaderText="Leaving Date" ItemStyle-Width="20" ApplyFormatInEditMode="true" DataFormatString="{0:d}" />
<asp:BoundField DataField="active" HeaderText="Active" ItemStyle-Width="25" />
<asp:TemplateField HeaderText="Action" HeaderStyle-Width="5%">
<ItemTemplate>
<asp:ImageButton ID="btnEdit" AlternateText="Edit" ImageUrl="~/images/edit.png" runat="server" Width="15" Height="15" CommandName="eEdit" CommandArgument='<%# Eval("Id") %>' CausesValidation="false" />
<asp:ImageButton ID="btnDelete" AlternateText="Delete" ImageUrl="~/images/delete.png" runat="server" Width="15" Height="15" CommandName="Delete" CommandArgument='<%# Eval("Id") %>' CausesValidation="false" OnClientClick="return confirm('Are you sure you want to delete this record?')" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerStyle ForeColor="#e3e3e3"
BackColor="#e3e3e3" CssClass="grid-pagi" />
<PagerTemplate>
<table runat="server" id="testTable1" style="width: 100%" class="hoverTable_tbl">
<tr>
<td class="col-md-4 pull-left">
<asp:Label ID="MessageLabel"
Text="Select a page:"
runat="server" />
<asp:LinkButton ID="FirstLB" runat="server" CommandName="Page" CommandArgument="First" ToolTip="First" CssClass="btn-pager btn-default"><<</asp:LinkButton>
<asp:LinkButton ID="PrevLB" runat="server" CommandName="Page" CommandArgument="Prev" ToolTip="Previous" CssClass="btn-pager btn-default"><</asp:LinkButton>
<asp:DropDownList runat="server" ID="PageDropDownList" AutoPostBack="true" EnableViewState="true" OnSelectedIndexChanged="PageDropDownList_SelectedIndexChanged" CssClass="selectpicker form-control-drp"></asp:DropDownList>
<asp:LinkButton ID="NextLB" runat="server" CommandName="Page" CommandArgument="Next" ToolTip="Next" CssClass="btn-pager btn-default">></asp:LinkButton>
<asp:LinkButton ID="LastLB" runat="server" CommandName="Page" CommandArgument="Last" ToolTip="Last" CssClass="btn-pager btn-default">>></asp:LinkButton>
</td>
<td class="col-md-3">
<div>
<div class="pull-left"><asp:Label ID="PageSizeLabel" CssClass="page-size" runat="server" Text="Select Page Size: "></asp:Label>
<asp:DropDownList ID="ddlPageSize" runat="server" OnSelectedIndexChanged="ddlPageSize_SelectedIndexChanged" AutoPostBack="true" CssClass="selectpicker form-control-drp">
<%-- <asp:ListItem Value="0" Text="0" />--%>
<asp:ListItem Value="1" Text="1" />
<asp:ListItem Value="2" Text="2" />
<asp:ListItem Value="3" Text="3" />
</asp:DropDownList>
</div>
<div>
<asp:Label ID="CurrentPageLabel" CssClass="view" runat="server" />
</div>
</div>
</td>
</tr>
</table>
</PagerTemplate>
<RowStyle />
</asp:GridView>
Exporting GridView to Excel is easier using a 3rd party like iTextSharp.
If you want to know how I make it work, you can check this sample code:
http://dotnetfrommanila.blogspot.com/2013/04/convert-gridview-to-excel-in-c.html
I hope it could help you.
I got it done on my own,
actually I forgot to add the code below and EnableEventValidation="false".
The code was:-
public override void VerifyRenderingInServerForm(Control control)
{
/* Verifies that the control is rendered */
}
and it worked.!!
Look this code
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="DownTimeSequenceNo">
<Fields>
<ext:ModelField Name="RowNumber" />
<ext:ModelField Name="DownTimeSequenceNo" />
<ext:ModelField Name="Status" Type="String" />
<ext:ModelField Name="Keterangan" />
<ext:ModelField Name="DownTimeDate" Type="Date" />
<ext:ModelField Name="WSID" Type="String" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="DownTimeSequenceNo" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="No" DataIndex="RowNumber" Sortable="False"
Width="50" Filterable="false" />
<ext:Column ID="Column2" runat="server" Text="DownTimeSequenceNo" DataIndex="DownTimeSequenceNo"
Visible="false" />
<ext:Column ID="Column3" runat="server" Text="Status" DataIndex="Status" Width="50" />
<ext:Column ID="Column4" runat="server" Text="Keterangan" DataIndex="Keterangan"
Width="100" Filterable="false" Sortable="False" />
<ext:DateColumn ID="Column5" runat="server" Text="Tanggal" DataIndex="DownTimeDate"
Width="80" Format="dd/MMM/Y HH:mm" Filterable="true" />
<ext:Column ID="Column6" runat="server" Text="WSID" DataIndex="WSID" Width="50" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" Mode="Multi" />
</SelectionModel>
<Plugins>
<ext:FilterHeader ID="FilterHeader1" runat="server" Remote="true" />
</Plugins>
</ext:GridPanel>
</asp:Panel>
This code works filtering if the filter data type is string, but it doesn't work when it is date. What should i do ?
I have tried to google and ext-net examples doesn't provide any help.
take alook at this offical example
here
u need to declare feature and specify date here
<Features>
<ext:GridFilters ID="GridFilters1" runat="server">
<Filters>
<ext:NumericFilter DataIndex="Id" />
<ext:StringFilter DataIndex="Company" />
<ext:NumericFilter DataIndex="Price" />
<ext:DateFilter DataIndex="Date">
<DatePickerOptions runat="server" TodayText="Now" />
</ext:DateFilter>
<ext:ListFilter DataIndex="Size" Options="extra small,small,medium,large,extra large" />
<ext:BooleanFilter DataIndex="Visible" />
</Filters>
</ext:GridFilters>
</Features>
I'm having an intermittent problem with the CollapsiblePanelExtender.
The way we are using them is to wrap it around a gridview, so that only the header-row is displayed(which contains a checkbox for select all) while collapsed. The page always load as collapsed.
about 95% of the time, this will work perfectly fine, however, once in a while the cpe loads with the right height set, but display:none as style instead of display:block.
This results in the panel being fully "collapsed". It's still possible to extend it, and when you subsequently collapse it, it works as intended.
Have anyone else experienced the same kind of issues with CPE?
Main usercontrol:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="FlightFareExplorer.ascx.cs"
Inherits="UserControls_Rowfilters_FlightFareExplorer" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%# Register Src="FareBasis.ascx" TagName="FareBasis" TagPrefix="uc4" %>
<%# Register Src="Flight.ascx" TagName="Flight" TagPrefix="uc3" %>
<%# Register Assembly="BusyBoxDotNet" Namespace="BusyBoxDotNet" TagPrefix="busyboxdotnet" %>
<busyboxdotnet:BusyBox ID="bsbWait" runat="server" Position="Center" ShowBusyBox="Custom"
Image="Custom" OverlayOpacity="25" ImageUrl="/Images/Misc/logo_anim.gif" Text="Your query is currently being processed" />
<asp:UpdatePanel ID="upHeader" ChildrenAsTriggers="false" UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<cc1:AnimationExtender runat="server" ID="aeTest" TargetControlID="pnlMenu">
<Animations>
<OnClick>
<Sequence>
<StyleAction AnimationTarget="pnlSettings" attribute="display" value="none" />
<StyleAction AnimationTarget="pnlSettings" attribute="zIndex" value="-100" />
<StyleAction AnimationTarget="pnlMenu" attribute="display" value="none" />
</Sequence>
</OnClick>
</Animations>
</cc1:AnimationExtender>
<cc1:AnimationExtender runat="server" ID="AnimationExtender1" TargetControlID="pnlHeader">
<Animations>
<OnClick>
<Sequence>
<StyleAction AnimationTarget="pnlMenu" attribute="display" value="block" />
<StyleAction AnimationTarget="pnlSettings" attribute="zIndex" value="1000" />
<StyleAction AnimationTarget="pnlSettings" attribute="display" value="inline" />
</Sequence>
</OnClick>
</Animations>
</cc1:AnimationExtender>
<div style="height: 18px; overflow: hidden;">
<div onclick="__doPostBack('<%= upFlightFare.ClientID %>', 'Open');">
<asp:Panel runat="server" ID="pnlHeader" CssClass="boxDataHead" Width="100%" onmouseover="document.body.style.cursor='pointer';"
onmouseout="document.body.style.cursor='default';">
<asp:Label runat="server" ID="lblHeader">Flight/Fare Details</asp:Label>
<asp:Image runat="server" ID="imgCollapsed" ImageUrl="~/Images/Misc/Pil_h_7x7_wh_bggreen.gif" />
</asp:Panel>
</div>
<div onclick="__doPostBack('<%= upFlightFare.ClientID %>', 'Close');">
<asp:Panel runat="server" ID="pnlMenu" CssClass="boxDataHead float" Width="100%"
onmouseover="document.body.style.cursor='pointer';" onmouseout="document.body.style.cursor='default';">
<asp:Label runat="server" ID="lblMenu">Flight/Fare Details(Click here to close)</asp:Label>
<asp:Image runat="server" ID="imgExpanded" ImageUrl="~/Images/Misc/Pil_ned_7x7_wh_bggreen.gif" />
</asp:Panel>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel runat="server" ID="pnlSettings" CssClass="FFE">
<asp:UpdateProgress ID="upExplorer" runat="server" AssociatedUpdatePanelID="upFlightFare"
DisplayAfter="50">
<ProgressTemplate>
<table border="0">
<tr>
<td rowspan="2">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Misc/logo_anim.gif" />
</td>
<td>
<p style="margin: 15px 10px 0px; font-weight: bold; font-style: normal; font-size: 11pt;
font-family: Verdana; color: black;">
Please wait</p>
</td>
</tr>
<tr>
<td>
<p id="ctl00_cntMain_ucAnalysisSettings_bsbWaitText" style="margin: 20px 10px 15px;
font-weight: normal; font-style: normal; font-size: 8pt; font-family: Verdana;
color: black;">
Your query is currently being processed</p>
</td>
</tr>
</table>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" ID="upFlightFare">
<ContentTemplate>
<cc1:AnimationExtender runat="server" ID="AnimationExtender2" TargetControlID="btnResetSelection">
<Animations>
<OnClick>
<Sequence>
<StyleAction AnimationTarget="pnlSettings" attribute="display" value="none" />
<StyleAction AnimationTarget="pnlSettings" attribute="zIndex" value="-100" />
<StyleAction AnimationTarget="pnlMenu" attribute="display" value="none" />
</Sequence>
</OnClick>
</Animations>
</cc1:AnimationExtender>
<cc1:AnimationExtender runat="server" ID="AnimationExtender3" TargetControlID="btnClose">
<Animations>
<OnClick>
<Sequence>
<StyleAction AnimationTarget="pnlSettings" attribute="display" value="none" />
<StyleAction AnimationTarget="pnlSettings" attribute="zIndex" value="-100" />
<StyleAction AnimationTarget="pnlMenu" attribute="display" value="none" />
</Sequence>
</OnClick>
</Animations>
</cc1:AnimationExtender>
<div class="boxDataFullCtrl">
<div style="text-align: right">
<asp:Button ID="btnUpdate" runat="server" Text="Save & Update" OnClick="btnUpdate_Click"
ToolTip="Saves your current selection and requeries the database" CssClass="ctrl ctrlABtnL" />
<asp:Button ID="btnResetSelection" runat="server" Text="Reset" OnClick="btnResetSelection_Click"
ToolTip="Resets all filters and closes the window" CssClass="ctrl ctrlABtn" />
<asp:Button ID="btnClose" runat="server" Text="Close" ToolTip="Closes the window without saving your changes"
CssClass="ctrl ctrlABtn" />
</div>
<table border="0">
<tr>
<td valign="top">
<uc3:Flight ID="ucFlightOutFilter" runat="server" ReturnFlights="false" SessionKey="Out" />
<br />
<uc4:FareBasis ID="ucFareBasisOutFilter" runat="server" ReturnFares="false" SessionKey="Out" />
</td>
<td valign="top">
<uc3:Flight ID="ucFlightHomeFilter" runat="server" ReturnFlights="true" SessionKey="Home" />
<br />
<uc4:FareBasis ID="ucFareBasisHomeFilter" runat="server" ReturnFares="true" SessionKey="Home" />
</td>
</tr>
</table>
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnUpdate" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
Embedded usercontrol:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="Flight.ascx.cs" Inherits="UserControls_FlightFilter" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<table border="0" cellpadding="3">
<tr>
<td style="background-color: #F8F8F8;">
<cc1:CollapsiblePanelExtender runat="server" ID="cpeFlights" TargetControlID="pnlFlightsContent"
CollapsedSize="0" Collapsed="false" ExpandControlID="pnlFlightsHeader" CollapseControlID="pnlFlightsHeader"
ExpandDirection="Vertical" ImageControlID="imgHeaderExpand" CollapsedImage="~/Images/Misc/plus.gif"
ExpandedImage="~/Images/Misc/minus.gif" SuppressPostBack="true" />
<asp:Panel ID="pnlFlightsHeader" runat="server">
<asp:ImageButton ID="imgHeaderExpand" CommandName="Expand" runat="server" ImageUrl="~/Images/Misc/plus.gif" />
<asp:Label ID="lblHeader" runat="server" Style="font-weight: bold;">Flights</asp:Label>
</asp:Panel>
<asp:Panel ID="pnlFlightsContent" runat="server">
<asp:Label ID="lblNoDataWarning" runat="server" CssClass="ctrl err" Visible="false">We we're unable to locate any flights for your current search parametres.</asp:Label>
<asp:Repeater runat="server" ID="rptFlights" OnItemDataBound="rptFlights_ItemDataBound">
<ItemTemplate>
<cc1:CollapsiblePanelExtender runat="server" ID="cpeGrid" TargetControlID="pnlFlight"
CollapsedSize="22" Collapsed="true" ExpandControlID="pnlOpenClose" CollapseControlID="pnlOpenClose"
ExpandDirection="Vertical" ImageControlID="imgExpand" CollapsedImage="~/Images/Misc/plus.gif"
ExpandedImage="~/Images/Misc/minus.gif" SuppressPostBack="true" />
<asp:PlaceHolder runat="server" ID="plhCarrier" Visible="false">
<asp:Panel runat="server" ID="pnlOpenClose">
<asp:Label runat="server" ID="lblCount" Style="float: right; padding-right: 4px;
color: #008800; font-weight: bold;"></asp:Label>
<div id="spnWeekHeader" class="tblHead" style="width: 207px; font-size: 11px; font-weight: bold;
border: solid 1px black; border-bottom: 0px;" runat="server">
<asp:ImageButton ID="imgExpand" CommandName="Expand" runat="server" ImageUrl="~/Images/Misc/plus.gif" />
<asp:Label runat="server" ID="lblrepeater">TEST</asp:Label>
</div>
</asp:Panel>
<asp:Panel runat="server" ID="pnlFlight" Height="22px" Style="overflow: hidden;">
<asp:GridView ID="gdvFlights" runat="server" AutoGenerateColumns="false" OnRowDataBound="gdvFlights_RowDataBound"
OnDataBound="gdvFlights_DataBound" CssClass="tbl ctrl">
<RowStyle BorderColor="black" BorderWidth="1px" BorderStyle="Solid" />
<AlternatingRowStyle CssClass="altRow" />
<HeaderStyle CssClass="tblHead" Wrap="true" />
<Columns>
<asp:TemplateField HeaderStyle-CssClass="tblHeadAdv" ItemStyle-HorizontalAlign="Center">
<HeaderTemplate>
<asp:CheckBox ID="chkSelectAllFlight" runat="server" Checked="false" AutoPostBack="false" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkSelectFlight" runat="server" Checked="false" AutoPostBack="false" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="FlightNo" HeaderText="Flight Number" HeaderStyle-CssClass="tblHeadAdv"
ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="Origin" HeaderText="Origin" HeaderStyle-CssClass="tblHeadAdv"
ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="Destination" HeaderText="Destination" HeaderStyle-CssClass="tblHeadAdv"
ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="POS" HeaderText="POS" HeaderStyle-CssClass="tblHeadAdv"
ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="Carrier" HeaderText="Carrier" HtmlEncode="false" HeaderStyle-CssClass="tblHeadAdv"
ItemStyle-HorizontalAlign="Center" />
<asp:BoundField HeaderText="Dep. time" DataField="DepartureTime" HtmlEncode="false"
HeaderStyle-CssClass="tblHeadAdv" ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="StopOver" HeaderText="Via" HeaderStyle-CssClass="tblHeadAdv"
ItemStyle-HorizontalAlign="Center" />
</Columns>
</asp:GridView>
</asp:Panel>
</asp:PlaceHolder>
<br />
</ItemTemplate>
</asp:Repeater>
</asp:Panel>
</td>
</tr>
</table>
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.