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>
Related
I use a dynamic cartesianchart, but when the columns are too many its resize them to fit the chart. But I want the columns to have a minimum column width, otherwise the chart is not readable. The page has 2 panels, in the top one there is the CartesianChart and a PolarChart. I follow this example
Code:
<ext:Panel ID="Panel1" runat="server" Height="250" MarginSpec="0 0 3 0">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:CartesianChart
ID="BarChart1"
runat="server"
Border="true"
Flex="4"
StoreID="storeSites" AutoScroll="true" Resizable="true" >
<Interactions>
<ext:ItemHighlightInteraction />
</Interactions>
<AnimationConfig Duration="300" Easing="EaseOut" />
<Axes>
<ext:NumericAxis Position="Left" Fields="patientstarget" Minimum="0" Hidden="true" />
<ext:CategoryAxis Position="Bottom" Fields="site">
<Label Font="9px Arial" RotationDegrees="-45" />
<Renderer Handler="return Ext.String.ellipsis(label, 15, false);" />
</ext:CategoryAxis>
</Axes>
<Series>
<ext:BarSeries
Highlight="true"
XField="site"
YField="patientstarget" >
<StyleSpec>
<ext:Sprite FillStyle="#456d9f" />
</StyleSpec>
<HighlightConfig>
<ext:Sprite FillStyle="#619fff" StrokeStyle="black" />
</HighlightConfig>
<Label
Display="InsideEnd"
Field="patientstarget"
Color="#000"
Orientation="Vertical"
TextAlign="Center"
/>
<Listeners>
<ItemMouseUp Fn="onMouseUp" />
</Listeners>
</ext:BarSeries>
</Series>
<Plugins>
<ext:ChartItemEvents ID="ChartItemEvents1" runat="server" />
</Plugins>
</ext:CartesianChart>
//PolarChart
</Items>
</ext:Panel>
I have tried to show the menu name below of menu icon,. but I don't know how to do that.
My ASPX Code
<asp:menu runat="server" ItemWrap="true" Orientation="Horizontal">
<Items>
<asp:MenuItem ImageUrl="~/Images/Admin.png" Selectable="true" Text="System" />
<asp:MenuItem ImageUrl="~/Images/user.png" Selectable="true" Text="User" />
<asp:MenuItem ImageUrl="~/Images/cut.png" Selectable="true" Text="Cut" />
<asp:MenuItem ImageUrl="~/Images/edit-copy.png" Selectable="true" Text="Copy" />
</Items>
</asp:menu>
Output
Please try putting <br> tag while setting Text to menu Item .
Then the menu will be
<asp:Menu runat="server" ItemWrap="true" Orientation="Horizontal">
<Items>
<asp:MenuItem ImageUrl="~/Images/Admin.png" Selectable="true" Text="<br> System" />
<asp:MenuItem ImageUrl="~/Images/user.png" Selectable="true" Text="<br> User" />
<asp:MenuItem ImageUrl="~/Images/cut.png" Selectable="true" Text="<br> Cut" />
<asp:MenuItem ImageUrl="~/Images/edit-copy.png" Selectable="true" Text="<br> Copy" />
</Items>
</asp:Menu>
<uc:Tabs runat="server">
<uc:ControlA runat="server" />
<uc:ControlB runat="server" />
<uc:ControlC runat="server" />
</uc:Tabs>
I'm trying to build a "Tabs" user control that will gather all of the controls nested within itself and wrap them in a specific set of html. Each nested user control should display normally. Any pointers to where I might begin?
Edit:
<asp:Menu
id="Menu1"
StaticMenuItemStyle-CssClass="tab"
StaticSelectedStyle-CssClass="selectedTab"
CssClass="tabs"
OnMenuItemClick="Menu1_MenuItemClick"
Runat="server">
<Items>
<asp:MenuItem Text="Tab 1" Value="0" Selected="true" />
<asp:MenuItem Text="Tab 2" Value="1" />
<asp:MenuItem Text="Tab 3" Value="2" />
</Items>
</asp:Menu>
<asp:MultiView ID="MultiView1" ActiveViewIndex="0" runat="server">
<asp:View ID="View1" runat="server">
<hi5:GameInfo runat="server" />
</asp:View>
<asp:View ID="View2" runat="server">
<hi5:GamePlayerInfo runat="server" />
</asp:View>
<asp:View ID="View3" runat="server">
<hi5:GuildInfo runat="server" />
</asp:View>
</asp:MultiView>
I guess I could use asp:Menu and asp:MultiView and wrap each with the appropriate classes.
Wish I could remove the auto generated css that asp:Menu puts into the <head> though. Any idea how to do that?
Here is an MSDN VB solution which could be easily translated to C#.
http://support.microsoft.com/kb/319100
However depending on what you are trying to accomplish, this sounds like it may be an overcomplicated or overkill solution for what you are trying to do.
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>
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.