I want a popup onclick that flies in animated. I'm using ajax and currently this is what I have:
<asp:ImageButton ID="ImageButton2" runat="server"
ImageUrl="~/images/bttnViewMini.gif" />
<asp:Panel ID="Panel3" runat="server">
//stuff
</asp:Panel>
<ajaxToolkit:AnimationExtender ID="ae"
runat="server" TargetControlID="ImageButton2" >
<Animations>
<OnClick>
<FadeIn Duration=".5" Fps="20" />
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
That makes my button fade in....
How Do I make it fade the Panel3 in instead?
What you want to do is in your FadeIn tag add:
<FadeIn AnimationTarget="Panel3" Duration=".5" Fps="20" />
Thanks for all of the hundreds of answers I received. Nevertheless here's what i did:
<asp:ImageButton ID="ImageButton2" runat="server"
ImageUrl="~/images/icon_info.gif" />
<div id="moveMe" style="display:none">
<div style="float:right;">
<asp:LinkButton ID="lnkBtnCloseColHelp" runat="server" Text="X" OnClientClick="return false;" />
</div>
<br /><br />
<table>
<tr>
<td>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="None of your Buisness" GridLines ="None" ShowHeader ="" >
<Columns>
<asp:BoundField DataField="LongDescription" HeaderText="Noyb:"
SortExpression="Noyb" />
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</div>
<ajaxToolkit:AnimationExtender ID="ae"
runat="server" TargetControlID="ImageButton2" >
<Animations>
<OnClick>
<Sequence>
<EnableAction Enabled="false"></EnableAction>
<StyleAction AnimationTarget="moveMe" Attribute="display" Value=""/>
<Parallel AnimationTarget="moveMe" Duration="1" Fps="30">
<Move Horizontal="-350" Vertical="50"></Move>
<FadeIn Duration=".5"/>
</Parallel>
<Parallel AnimationTarget="moveMe" Duration=".5">
<Color PropertyKey="color" StartValue="#666666" EndValue="#0000FF" />
<Color PropertyKey="borderColor" StartValue="#666666" EndValue="#FF0000" />
</Parallel>
</Sequence>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
<ajaxToolKit:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="lnkBtnCloseColHelp">
<Animations>
<OnClick>
<Sequence AnimationTarget="moveMe">
<Parallel AnimationTarget="moveMe" Duration=".7" Fps="20">
<Move Horizontal="350" Vertical="-50"></Move>
<Scale ScaleFactor="0.05" FontUnit="px" />
<Color PropertyKey="color" StartValue="#FF0000" EndValue="#666666" />
<Color PropertyKey="borderColor" StartValue="#FF0000" EndValue="#666666" />
<FadeOut />
</Parallel>
<StyleAction Attribute="display" Value="none"/>
<StyleAction Attribute="height" Value=""/>
<StyleAction Attribute="width" Value="400px"/>
<StyleAction Attribute="fontSize" Value="14px"/>
<EnableAction AnimationTarget="ImageButton2" Enabled="true" />
</Sequence>
</OnClick>
</Animations>
</ajaxToolKit:AnimationExtender>
Related
I want to rotate gridview in Web Form to print it clear because it doesn't fit in portrait orientation of the page. Gridview is going after page-break-before:always;
But when I rotate it, it cuts 50% of the grid for some strange reasons.
How can I rotate grid and make it fit 100% on the page ?
I want to have something like this :
But i have this situation
My CSS to rotate :
.gridCss {
width: 100%;
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
font-size:8px;
word-wrap: break-word;
height:100%;
}
My code:
<div class="gridCss" style="page-break-before:always;" >
<br />
<br />
<center CssClass="rotateText" > <asp:Label ID="MainLbl" runat="server" /> и</center> <br />
<center CssClass="rotateText" ><asp:Label ID="Lab1" runat="server" Text=""></asp:Label></center> <br />
<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="DSI" Width="100%" >
<Columns>
<asp:BoundField DataField="one" HeaderText="" SortExpression="1" HtmlEncode="True" />
<asp:BoundField DataField="fio" HeaderText="two" SortExpression="2" />
<asp:BoundField DataField="3" HeaderText="" SortExpression="3" />
<asp:BoundField DataField="4" HeaderText="К4" SortExpression="4" />
<asp:BoundField DataField="Date" HeaderText="5" SortExpression="Date" />
...
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="DSI" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectSta %>" SelectCommand="Command" SelectCommandType="StoredProcedure">
<SelectParameters>
<asp:SessionParameter Name="Sess" SessionField="Sess" Type="String" />
<asp:Parameter DefaultValue="1" Name="st" Type="Int32" />
<asp:Parameter DefaultValue="1" Name="nr" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
<br />
<br />
<br />
<br />
<tr>
<td class="abz"/>
<td align="right">
<pre>
_______
<asp:Label ID="Label_gv_2" runat="server" Text="_____"></asp:Label>
_______ __________________ Дата:___
<asp:Label ID="Label_dt_2" runat="server" Text="_____"></asp:Label>
________ (ФИО) (подпись)<br />
</pre>
</div>
I used DevExpress Data Grid that supports export and printing with extended options, including document page orientation. If you do not need the grid, you can use their reporting tool to print tabled data.
I am trying to create 2 different columns, and within each column I want to have multiple items. For instance a ComboBox, and 2 DateFields in one column.
I publish the code, and it gives me and error when I try to run it saying "Only one Component allowed in this Collection"
<body>
<form id="MetricsForm" runat="server">
<ext:ResourceManager ID="MetricsManager" runat="server" />
<ext:Viewport ID="MetricsViewPort" runat="server"></ext:Viewport>
<asp:SqlDataSource ID="DMSSQL2DataSource" runat="server" ConnectionString="" />
<asp:SqlDataSource ID="LocalDataSource" runat="server" ConnectionString="" />
<ext:TabPanel ID="TabPanel" runat="server">
<Items>
<ext:Panel runat="server" Title="Step 1" ID="Tab1">
<Items>
<ext:Panel ID="Panel1"
runat="server"
Title="Step 1: Choose date span and set spans"
Region="North"
Height="200"
Width="475"
MinWidth="225"
MaxWidth="475">
<Items>
<ext:Container runat="server" Layout="RowLayout" Height="200" >
<Items>
<ext:ColumnLayout runat="server" ID="MetricsColumnLayout">
<Columns>
<ext:LayoutColumn ColumnWidth="0.5">
<ext:RadioGroup runat="server" ID="ChooseSpan" Selectable="true" ColumnsNumber="1" >
<Items>
<ext:Radio ID="RadioAll" runat="server" BoxLabel="Show All" InputValue="0" />
<ext:Radio ID="RadioMonth" runat="server" BoxLabel="Choose Date Range(By Month)" InputValue="1" />
<ext:Radio ID="RadioDate" runat="server" BoxLabel="Choose Date Range(By Dates)" InputValue="2" />
</Items>
</ext:RadioGroup>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="0.5">
<ext:ComboBox runat="server" ID="MonthComboBox" Selectable="true" SelectedIndex="0" StyleSpec="margin-bottom:4px;" Width="200" >
<Items>
<ext:ListItem Text="Any Month" Value="0" />
<ext:ListItem Text="January" Value="1" />
<ext:ListItem Text="February" Value="2" />
<ext:ListItem Text="March" Value="3" />
<ext:ListItem Text="April" Value="4" />
<ext:ListItem Text="May" Value="5" />
<ext:ListItem Text="June" Value="6" />
<ext:ListItem Text="July" Value="7" />
<ext:ListItem Text="August" Value="8" />
<ext:ListItem Text="September" Value="9" />
<ext:ListItem Text="October" Value="10" />
<ext:ListItem Text="November" Value="11" />
<ext:ListItem Text="December" Value="12" />
</Items>
</ext:ComboBox>
<ext:DateField
ID="StartDateField"
runat="server"
FieldLabel="Start"
Vtype="daterange"
AnchorHorizontal="100%"
EnableKeyEvents="true"
Width="200">
<CustomConfig>
<ext:ConfigItem Name="endDateField" Value="#{EndDateField}" Mode="Value" />
</CustomConfig>
<Listeners>
</Listeners>
</ext:DateField>
<ext:DateField
ID="EndDateField"
runat="server"
Vtype="daterange"
FieldLabel="End"
AnchorHorizontal="100%"
EnableKeyEvents="true"
Width="200">
<CustomConfig>
<ext:ConfigItem Name="startDateField" Value="#{StartDateField}" Mode="Value" />
</CustomConfig>
<Listeners>
</Listeners>
</ext:DateField>
</ext:LayoutColumn>
</Columns>
</ext:ColumnLayout>
</Items>
</ext:Container>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
<ext:Panel runat="server" Title="Step 2" ID="Tab2">
</ext:Panel>
</Items>
</ext:TabPanel>
<div>
</div>
</form>
I'm not 100% sure what layout you are trying to configure, but it would be best to avoid using the Layout Controls as they have been removed from Ext.NET 2. You can use the .Layout property.
The following sample demonstrates replacing the Layout control with .Layout property.
Example
<%# Page Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:TabPanel runat="server">
<Items>
<ext:Panel runat="server" Title="Step 1">
<Items>
<ext:Panel
runat="server"
Title="Step 1: Choose date span and set spans"
Region="North"
Height="200"
Width="475"
MinWidth="225"
MaxWidth="475">
<Items>
<ext:Container runat="server" Layout="ColumnLayout" Height="200">
<Items>
<ext:RadioGroup runat="server" Selectable="true" ColumnsNumber="1" >
<Items>
<ext:Radio runat="server" BoxLabel="Show All" InputValue="0" />
<ext:Radio runat="server" BoxLabel="Choose Date Range(By Month)" InputValue="1" />
<ext:Radio runat="server" BoxLabel="Choose Date Range(By Dates)" InputValue="2" />
</Items>
</ext:RadioGroup>
<ext:ComboBox
runat="server"
Selectable="true"
SelectedIndex="0"
StyleSpec="margin-bottom:4px;"
Width="200">
<Items>
<ext:ListItem Text="Any Month" Value="0" />
<ext:ListItem Text="January" Value="1" />
<ext:ListItem Text="February" Value="2" />
<ext:ListItem Text="March" Value="3" />
<ext:ListItem Text="April" Value="4" />
<ext:ListItem Text="May" Value="5" />
<ext:ListItem Text="June" Value="6" />
<ext:ListItem Text="July" Value="7" />
<ext:ListItem Text="August" Value="8" />
<ext:ListItem Text="September" Value="9" />
<ext:ListItem Text="October" Value="10" />
<ext:ListItem Text="November" Value="11" />
<ext:ListItem Text="December" Value="12" />
</Items>
</ext:ComboBox>
<ext:DateField
runat="server"
FieldLabel="Start"
AnchorHorizontal="100%"
EnableKeyEvents="true"
Width="200"
/>
<ext:DateField
runat="server"
FieldLabel="End"
AnchorHorizontal="100%"
EnableKeyEvents="true"
Width="200"
/>
</Items>
</ext:Container>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
<ext:Panel runat="server" Title="Step 2"/>
</Items>
</ext:TabPanel>
</form>
</body>
</html>
Just wrap the things in a Container.
<ext:Container
runat="server"
Width="600"
Height="300"
Layout="ColumnLayout">
<Items>
<ext:RadioGroup runat="server" ColumnWidth="0.5">
<Items>
<ext:Radio runat="server" BoxLabel="1" />
<ext:Radio runat="server" BoxLabel="2" />
</Items>
</ext:RadioGroup>
<ext:Container runat="server" ColumnWidth="0.5">
<Items>
<ext:ComboBox runat="server" />
<ext:DateField runat="server" />
<ext:DateField runat="server" />
</Items>
</ext:Container>
</Items>
</ext:Container>
how can i make this modal popup fill 80% of the screen in the x and y direction. i.e a margin of 10% on each side
Markup
<!-- Add Files Modal Form -->
<asp:HiddenField ID="AddFilesForModal" runat="server" />
<ajaxToolkit:ModalPopupExtender runat="server" ID="AddFilesModal" BehaviorID="modalPopupExtenderAddFiles"
TargetControlID="dummyButtonAddToPendingList" PopupDragHandleControlID="PanelAddFilesOuter" PopupControlID="PanelAddFilesOuter"
OkControlID="dummyButtonAddToPendingList" BackgroundCssClass="ModalTreeviewBackgroundz" DropShadow="false"
Drag="true">
</ajaxToolkit:ModalPopupExtender>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender4" runat="server" TargetControlID="PanelAddFilesInner">
</ajaxToolkit:RoundedCornersExtender>
<asp:Panel ID="PanelAddFilesOuter" runat="server" BackColor="Transparent" Style="display: none;">
<asp:Panel ID="PanelAddFilesInner" runat="server" BackColor="White" >
<ContentTemplate>
<div id="AddFilesContainer">
<br />
<div style="max-height:800px;overflow:auto;">
<asp:TreeView ID="TreeViewAddItems" runat="server" BorderStyle="Solid" ShowCheckBoxes="Leaf"
Width="99%" ImageSet="XPFileExplorer" NodeIndent="15" PathSeparator="\" ShowExpandCollapse="true"
EnableClientScript="true" OnTreeNodeCheckChanged="OnTreeNodeCheckChanged" OnAdaptedTreeNodeCheckChanged="OnTreeNodeCheckChanged" ShowLines="True">
<HoverNodeStyle Font-Underline="True" ForeColor="#6666AA" />
<NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black" HorizontalPadding="2px"
NodeSpacing="0px" VerticalPadding="2px" />
<ParentNodeStyle Font-Bold="False" />
<SelectedNodeStyle BackColor="#B5B5B5" Font-Underline="False" HorizontalPadding="0px"
VerticalPadding="0px" />
</asp:TreeView>
</div>
<br />
<div class="base">
<asp:LinkButton ID="lnkAddToPendingList" runat="server" OnClick="BtnAddToPendingList_Click" BorderStyle="Solid" BackColor="#CCCCCC">Add selected items to list</asp:LinkButton>
<asp:Button CssClass="Button" ID="dummyButtonAddToPendingList" runat="server" Style="display: none;" />
<asp:Button CssClass="Button" ID="CancelAddFiles" runat="server" Text="Cancel" OnClientClick="$find('modalPopupExtenderAddFiles').hide(); return false;" />
</div>
</div>
</ContentTemplate>
</asp:Panel>
</asp:Panel>
<!-- End Add Files Modal Form -->
Look at the resulting HTML, and style it with CSS. The CSS likely will look something like this:
.modal {
display: block;
width: 90%;
height: 90%;
margin: auto;
}
I have a chunk of code that on page load with populates some of or all of the following labels. It should have two labels per line ( needs a line break after each xData label). The problem I am having is that since the number of labels with data and set to visable on page load changes, the br / tags cause spacing issues when not all labels are visible.
<div id="Status">
<asp:Label ID="1" runat="server" Text="1:" Width="125px" Visible="false" />
<asp:Label ID="1Data" runat="server" Text="" Visible="false" />
<asp:Label ID="2" runat="server" Text="2:" Width="125px" Visible="false" />
<asp:Label ID="2Data" runat="server" Text="" Visible="false" />
<asp:Label ID="3" runat="server" Text="3:" Width="125px" Visible="false" />
<asp:Label ID="3Data" runat="server" Text="" Visible="false" />
</div>
I would like to be able to add the line breaks after each "xData" label in the code behind when the labels are filled and set to visible.
I have tried adding "\n" to the label text and\or Environment.NewLine with no luck.
Thanks for any help
The easy way...
<div id="Status">
<div id="Status1" runat="server" Visible="false">
<asp:Label ID="1" runat="server" Text="1:" Width="125px" />
<asp:Label ID="1Data" runat="server" Text="" />
</div>
<div id="Status2" runat="server" Visible="false">
<asp:Label ID="2" runat="server" Text="2:" Width="125px" />
<asp:Label ID="2Data" runat="server" Text="" />
</div>
<div id="Status3" runat="server" Visible="false">
<asp:Label ID="3" runat="server" Text="2:" Width="125px" />
<asp:Label ID="3Data" runat="server" Text="" />
</div>
</div>
The right way...
<div id="Status">
<asp:Label CssClass="statusLabel" ID="1" runat="server" Text="1:" Width="125px" Visible="false" />
<asp:Label ID="1Data" runat="server" Text="" Visible="false" />
<asp:Label CssClass="statusLabel" ID="2" runat="server" Text="2:" Width="125px" Visible="false" />
<asp:Label ID="2Data" runat="server" Text="" Visible="false" />
<asp:Label CssClass="statusLabel" ID="3" runat="server" Text="3:" Width="125px" Visible="false" />
<asp:Label ID="3Data" runat="server" Text="" Visible="false" />
</div>
/* CSS */
#Status span {
display: block;
}
#Status .statusLabel {
clear: both;
float: left;
}
I think you could do it a couple of different ways.
One option would be what #Greg points out in his comment to your post.
Another possible option would be enclosing each label in its own <div> tag with runat="server" and then make these <div>s visible when needed. The <div> should create its own line break because of the nature of a <div>
asp:Label resolves to a span in html. If you want each one to have its own line, add the css style "display:block". Usually, you can do this by setting CssClass and put display:block in that class
If you want this way, you need to use Literal control for each BR tag so that you can set it to visible/invisible based on the visibility of corresponding Label control.
Why not just add a CSS class with a display: block rule to those labels?
This is presentational, after all.
Try wrapping the labels around a <div> instead of putting a <br /> at the end. In my experience, empty <div>'s don't create that empty space.
I have a gridview inside of a div that is displayed with ajax. I have the following.
<asp:ImageButton ID="ImageButton2" runat="server"
ImageUrl="~/images/icon_info.gif" />
<div id="moveMe" style="display:none">
<div style="float:right;">
<asp:LinkButton ID="lnkBtnCloseColHelp" runat="server" Text="X" OnClientClick="return false;" />
</div>
<br /><br />
<table>
<tr>
<td>
<asp:GridView ID="GridView2" Width="400px" runat="server" AutoGenerateColumns="False"
AllowPaging ="True"
BackColor="White" BorderColor="#999999"
BorderStyle="None" BorderWidth="1px"
CellPadding="3" DataKeyNames="noyb"
DataSourceID="noyb"
PagerSettings-Mode="NextPreviousFirstLast">
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<Columns>
<asp:BoundField DataField="noyb" HeaderText="App Name" ReadOnly="True"
SortExpression="noyb" />
<asp:BoundField DataField="Description" HeaderText="Short Descr"
ReadOnly="True" SortExpression="Description" />
<asp:BoundField DataField="LongDescription" HeaderText="Long Descr"
SortExpression="LongDescription" />
</Columns>
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="#DCDCDC" />
<PagerTemplate>
<small 12px""="" style="font-size:xx-small; padding-right">Go To Page</small>
<asp:DropDownList ID="ddlPageSelector" runat="server" AutoPostBack="true"
Font-Size="XX-Small" Height="19px" Width="36px">
</asp:DropDownList>
<asp:ImageButton ID="btnFirst" runat="server" CommandArgument="First"
CommandName="Page" SkinID="pagefirst" />
<asp:ImageButton ID="btnPrevious" runat="server" CommandArgument="Prev"
CommandName="Page" SkinID="pageprev" />
<asp:ImageButton ID="btnNext" runat="server" CommandArgument="Next"
CommandName="Page" SkinID="pagenext" />
<asp:ImageButton ID="btnLast" runat="server" CommandArgument="Last"
CommandName="Page" SkinID="pagelast" />
</PagerTemplate>
</asp:GridView>
</td>
</tr>
</table>
</div>
<ajaxToolkit:AnimationExtender ID="ae"
runat="server" TargetControlID="ImageButton2" >
<Animations>
<OnClick>
<Sequence>
<EnableAction Enabled="false"></EnableAction>
<StyleAction AnimationTarget="moveMe" Attribute="display" Value=""/>
<Parallel AnimationTarget="moveMe" Duration="1" Fps="30">
<Move Horizontal="350" Vertical="200"></Move>
<FadeIn Duration=".5"/>
</Parallel>
<Parallel AnimationTarget="moveMe" Duration=".5">
<Color PropertyKey="color" StartValue="#666666" EndValue="#0000FF" />
<Color PropertyKey="borderColor" StartValue="#666666" EndValue="#FF0000" />
</Parallel>
</Sequence>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
<ajaxToolKit:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="lnkBtnCloseColHelp">
<Animations>
<OnClick>
<Sequence AnimationTarget="moveMe">
<Parallel AnimationTarget="moveMe" Duration=".7" Fps="20">
<Move Horizontal="350" Vertical="-50"></Move>
<Scale ScaleFactor="0.3" FontUnit="px" />
<Color PropertyKey="color" StartValue="#FF0000" EndValue="#666666" />
<FadeOut />
</Parallel>
<StyleAction Attribute="display" Value="none"/>
<StyleAction Attribute="height" Value=""/>
<StyleAction Attribute="width" Value="400px"/>
<EnableAction AnimationTarget="ImageButton2" Enabled="true" />
</Sequence>
</OnClick>
</Animations>
</ajaxToolKit:AnimationExtender>
Why am i not able to page anymore?
Just a thought... maybe you need the GridView in an ajax update panel.