so I got some quite simple markup containing a button inside a Toolbar.
The problem now is, even though the button is "correctly" written to DOM it does not show up.
See this screenshot for details:
would someone mind explaining why setting fixed heights / widths / positions does not bring the button to front and the containing markup elements all have either width=0px; or height=0px;?
Here comes a sample:
<body>
<ext:ResourceManager ID="RM" runat="server" />
<ext:Viewport Layout="BorderLayout" runat="server" ID="InnerView" OverflowY="Scroll">
<Content>
<ext:Button ID="adminswap" runat="server" Text="Admin-Ansicht umschalten" Hidden="false"
AllowDepress="true" MinHeight="16" ToFrontOnShow="true" Visible="true" Icon="ArrowSwitchBluegreen">
<%-- This Guy doesn't show up--%>
</ext:Button>
<ext:Panel runat="server" ID="order" Border="false" OverflowY="Scroll">
<LayoutConfig>
<ext:TableLayoutConfig Columns="3" />
</LayoutConfig>
<Items>
<ext:Panel runat="server" Layout="ColumnLayout" RowSpan="2" Border="false">
<Content>
<p> And here is some Grid-panel, which is of no further interest</p>
</Content>
</ext:Panel>
<ext:Panel ColSpan="2" runat="server" ID="Panel_Instructions" Title="Türöffnung per Telefon"
Width="740" Padding="10" Border="true" AutoHeight="true">
<Content>
<br />
<p>
Some Multiline text containing instructions<br>
this also is of no further interest and just for the sake of the sample<br><br> lorem Ipsum dolor sit amet and stuff...
</p>
</Content>
</ext:Panel>
<ext:Panel runat="server" Width="350" AutoHeight="false" Height="200"
StripeRows="true" TrackMouseOver="true" Border="true">
<Content>
<p>Some Content Grid-Panel</p>
</Content>
</ext:Panel>
<ext:Panel runat="server" ID="Standort_Details" Title="Adresse" Width="370" Padding="10"
AutoHeight="false" Height="200" Border="true">
<Items>
<ext:DisplayField ID="Details_field1" runat="server" FieldLabel="street"
Name="" />
<ext:DisplayField ID="Details_field2" runat="server" FieldLabel="postal code" Name="" />
<ext:DisplayField ID="Details_field3" runat="server" FieldLabel="city" Name="" />
<ext:DisplayField ID="Details_field4" runat="server" FieldLabel="phone" Name="" />
</Items>
</ext:Panel>
<ext:Panel ID="Panel_5" Border="true" Height="460" StyleSpec="vertical-align:top;" ColSpan="3" runat="server">
<Content>
<p> some content control grid-panel</p>
</Content>
</ext:Panel>
</Items>
</ext:Panel>
</Content>
</ext:Viewport>
</body>
A BorderLayout works with regions. You don't specify any regions. To get the Button visible you can just remove the Layout="BorderLayout" of the Viewport.
Here is an example of using a BorderLayout.
Related
I have a radwindow being called and its not wanting to have anything to do with staying or opening in a restricted zone for it.
I looked at the Telerik Demo's, and started from there. I followed the demo's and tried modifying the Radwindow to work the way I wanted it and it just doesn't work and I am not sure why or where I am going wrong.
I have tried a couple different things for its restriction zone, but no matter what I have done, it won't stay where I want it.
The window opens on the event, but maximizes to the full screen and not in its zone.
Please pay no mind to the NavigationUrl of the menu, they were just there for testing earlier.
Here is the script for calling the window.
function OpenRadWindow() {
var myWindow = window.radopen(null, "RadWindow Test");
myWindow.center;
myWindow.maximize();
}
and here is my markup
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<div id="container" style="width: 100%; height: 100%">
<table>
<tr>
<td valign="top">
<div id="Nav" style="width: 250px; height: 100%; float: left;">
<telerik:RadPanelBar ID="RadPanelBar1" runat="server" OnClientItemClicking="OnAreaClick">
<Items>
<telerik:RadPanelItem Text="Products" Expanded="true" runat="server">
<Items>
<telerik:RadPanelItem Text="Search Product" />
<telerik:RadPanelItem Text="Add Product" />
<telerik:RadPanelItem Text="Update Product" />
<telerik:RadPanelItem Text="Delete Product" />
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem Text="Vendors" Expanded="false" runat="server">
<Items>
<telerik:RadPanelItem Text="Search Vendor" NavigateUrl="BrowseVendors.aspx" />
<telerik:RadPanelItem Text="Add Vendor" NavigateUrl="WebForm3.aspx" />
<telerik:RadPanelItem Text="Update Vendor" />
<telerik:RadPanelItem Text="Delete Vendor" />
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem Text="Locations" Expanded="false" runat="server">
<Items>
<telerik:RadPanelItem Text="Search Location" />
<telerik:RadPanelItem Text="Add Location" />
<telerik:RadPanelItem Text="Update Location" />
<telerik:RadPanelItem Text="Delete Location" />
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem Text="Receiving" Expanded="false" runat="server">
<Items>
<telerik:RadPanelItem ImageUrl="Images/AddRecord.gif" Text="Search PO" />
<telerik:RadPanelItem ImageUrl="Images/AddRecord.gif" Text="Receive PO" />
</Items>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelBar>
</div>
</td>
<td width="100%">
<div id="RestrictionArea" style="width: 100%; height: 100%; border: 1px solid black; float: left;">
<asp:Panel ID="pnlRestArea" Width="100%" Height="625px" runat="server" BackColor="Gray">
<table>
<tr>
<td id="RZone">
</td>
</tr>
</table>
</asp:Panel>
</div>
</td>
</tr>
</table>
</div>
<div>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">
<Windows>
<telerik:RadWindow runat="server" ID="RadWindow1" Height="300px" Width="400px" RestrictionZoneID="RZone">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
</div>
<telerik:RadButton AutoPostBack="false" ID="Button1" runat="server" OnClientClicked="OpenRadWindow" Text="Open RadWindow" />
I had the restriction id in the radwindow properties itself and not where it should have been. It was supposed to be in the radwindowmanager, now its there and working.
Here is my code:
<asp:WebPartZone ID="Zone1" runat="server" Width="100%" PartChromeType="None" Padding="0" PartStyle-CssClass="NoPadding"
PartStyle-BackColor="Transparent" BackColor="Transparent" PartChromeStyle-BackColor="Transparent">
<PartStyle BackColor="Transparent"></PartStyle>
<CloseVerb Visible="false" />
<MinimizeVerb Visible="false" />
<ZoneTemplate>
<div class="demo">
<p>Procedure Queues</p>
</div>
<div class="demoBottom">
<div class="divPortletContent">
<br />
<asp:DataList ID="dlProcedureQueues" runat="server" >
<ItemTemplate>
<asp:HyperLink ID="lbProcedureQueues" runat="server" Text='<%# Eval("site_nm") %>' NavigateUrl='<%# Eval("site_url") %>' />
</ItemTemplate>
</asp:DataList>
</div>
</div>
</ZoneTemplate>
</asp:WebPartZone>
The text from <div class="demo"><p>Procedure Queues</p></div> is miising and it works if I put it outside of webpart. Also, I am loosing all the css styles when placed inside webpart's ZoneTemplate.
Any ideas?? Thanks in advance.
Let me answer my own question. From what I found out, ZoneTemplate only considers the asp controls (including user controls) as web parts and ignores all the html.
I have this accordion with 3 panes. On one of these panes there is a button which is supposed to raise a click event but it does not. I have tried to remove all validators which didn't work, to remove CalendarExtenders which didn't work, to put the button outside the accordion which didn't work, to comment out the accordion with the button outside which didn't work, to comment out the calendar which didn't work, but when I comment out both the calendar and the accordion it triggers the event properly. I check if it fires by placing a breakpoint in the proper method and the request is also timed out when it doesn't work.
The markup is as following:
<div id="container">
<div id="calendar">
<asp:calendar id="Calendar1" runat="server" backcolor="#6dc066" bordercolor="#000000" borderwidth="2px" font-names="Verdana" font-size="1.2em" forecolor="White" height="400px" width="400px" style="margin-right: 0px" cellpadding="4" daynameformat="Shortest" ondayrender="Calendar1_DayRender" onselectionchanged="Calendar1_SelectionChanged">
<DayHeaderStyle BackColor="#666666" Font-Bold="True" Font-Size="9pt" />
<NextPrevStyle VerticalAlign="Bottom" />
<OtherMonthDayStyle ForeColor="#000000" />
<TitleStyle BackColor="#494949" BorderColor="Black" Font-Bold="True" />
<TodayDayStyle BackColor="#FFFFFF" ForeColor="Black" />
<WeekendDayStyle BackColor="#487346"/>
</asp:calendar>
</div>
<div class="accordion-div">
<asp:Accordion ID="MyAccordion" runat="Server" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordion" TransitionDuration="250" FramesPerSecond="40" RequireOpenedPane="true" SuppressHeaderPostbacks="true">
<Panes>
<asp:AccordionPane runat="server" ID="InfoPane">
<header>Informationer om valgt dato</header>
<Content>
<div style="margin: 5px;">
<b>Startdato: </b><asp:Label runat="server" ID="startLabel" />
<br />
<b>Slutdato: </b><asp:Label runat="server" ID="endLabel" />
<br />
<b>Reserveret af: </b><asp:Label runat="server" ID="authorLabel" />
<br />
<b>Kommentarer: </b><asp:Label runat="server" ID="commentsLabel" />
<br />
<b>Reserveringstidspunkt: </b><asp:Label runat="server" ID="bookedTimeLabel" />
</div>
</Content>
</asp:AccordionPane>
<asp:AccordionPane runat="server" ID="BookingPane">
<Header>Reservering</Header>
<Content>
<div style="margin-left: 10px; width: 350px;">
<h3>Reserver:</h3>
<p>
<b>Startdato: </b><asp:TextBox runat="server" ID="txtStart" CausesValidation="true" CssClass="right-align"></asp:TextBox>
<asp:CalendarExtender FirstDayOfWeek="Monday" ID="txtStart_CalendarExtender" runat="server" Enabled="True" TargetControlID="txtStart" Format="dd/MM/yyyy">
</asp:CalendarExtender>
<asp:RequiredFieldValidator ID="StartRequired" ControlToValidate="txtStart" runat="server" ErrorMessage="Udfyldelse er påkrævet" Display="Dynamic"/>
<asp:RangeValidator ID="StartRange" ControlToValidate="txtStart" runat="server" ErrorMessage="Startdato skal være efter i dag" Type="Date" Display="Dynamic"/>
<br />
</p>
<p>
<b>Slutdato: </b><asp:TextBox runat="server" ID="txtEnd" CausesValidation="true" CssClass="right-align"></asp:TextBox>
<asp:CalendarExtender FirstDayOfWeek="Monday" ID="txtEnd_CalendarExtender" runat="server" Enabled="True" TargetControlID="txtEnd" Format="dd/MM/yyyy">
</asp:CalendarExtender>
<asp:RequiredFieldValidator ID="EndRequired" ControlToValidate="txtEnd" runat="server" ErrorMessage="Udfyldelse er påkrævet" Display="Dynamic"/>
<asp:RangeValidator ID="EndRange" ControlToValidate="txtEnd" runat="server" ErrorMessage="Slutdato skal være efter i dag" Type="Date" Display="Dynamic"/>
<br />
</p>
<p>
<b>Kommentar: </b><asp:TextBox runat="server" ID="txtComment" CssClass="right-align"></asp:TextBox>
<br />
</p>
<p>
<asp:CustomValidator runat="server" ID="customVal" ControlToValidate="txtEnd" ErrorMessage="En af de valgte dag er booket" OnServerValidate="customVal_ServerValidate" Display="Dynamic"/>
<asp:CompareValidator runat="server" ControlToValidate="txtStart" ErrorMessage="Startdatoen skal være før slutdatoen" ControlToCompare="txtEnd" Operator="LessThanEqual" Type="Date" Display="Dynamic"/>
<br />
<asp:Button ID="BookButton" runat="server" OnClick="BookButton_Click" Text="Reserver" BackColor="LightGray" BorderStyle="Solid" BorderColor="Black"/>
<br />
<asp:Label runat="server" ID="SuccesLabel" Visible="false" BackColor="LightGreen"/>
</p>
</div>
</Content>
</asp:AccordionPane>
<asp:AccordionPane runat="server" ID="MyReservationPane">
<header>Mine reservationer</header>
</asp:AccordionPane>
</Panes>
</asp:Accordion>
</div>
</div>
Thanks in advance
I tested your code. It reveals that you are getting date format mismatch. As you set the date format to British in calendar extenders, but the range validators evaluating against American date format. Hence, stopping you from post back on button click.
If this is the case, you may add following in your Page_Load (code behind):
Thread.CurrentThread.CurrentCulture = new CultureInfo("en-GB");
This should solve your problem.
So i have the whole thing working and set up, except that the box of the htmleditorextender has no lower border if I customize the height of the textbox. If I leave it unspecified, it displays correctly but the boxes too big to have in the page. What can I do?
This is the code I have:
<asp:TextBox
ID="TServiceDescription"
TextMode="MultiLine"
Height="150px"
BorderWidth="0"
runat="server" />
<cc1:HtmlEditorExtender ID="HtmlEditorExtender1"
TargetControlID="TServiceDescription"
runat="server" >
<Toolbar>
<ajaxToolkit:Bold />
<ajaxToolkit:Italic />
<ajaxToolkit:Underline />
<ajaxToolkit:StrikeThrough />
<ajaxToolkit:Subscript />
<ajaxToolkit:Superscript />
<ajaxToolkit:JustifyLeft />
<ajaxToolkit:JustifyCenter />
<ajaxToolkit:JustifyRight />
<ajaxToolkit:JustifyFull />
<ajaxToolkit:InsertOrderedList />
<ajaxToolkit:InsertUnorderedList />
<ajaxToolkit:CreateLink />
<ajaxToolkit:Indent />
</Toolbar>
</cc1:HtmlEditorExtender>
and thanks in advance
You can define Rows for the TextBox control. as
ID="TServiceDescription"
TextMode="MultiLine"
rows="10"
BorderWidth="0"
runat="server" />
My accordion panel in markup:
<ajaxToolkit:Accordion
ID="MyAccordion"
runat="server"
SelectedIndex="0"
HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent"
AutoSize="None"
FadeTransitions="true"
TransitionDuration="250"
FramesPerSecond="40"
RequireOpenedPane="false"
SuppressHeaderPostbacks="true">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane10" runat="server">
<Header>BBBBBBBBBB</Header>
<Content>
FFFFFFFF:<br /><br />
<table cellpadding="0" cellspacing="0" width="750"><tr><td width="450" class="verificationtdleft">
<asp:Image ID="step4_originalimage" runat="server" AlternateText="" />
</td><td width="300">
<asp:CheckBox ID="CB_Verification0" runat="server" AutoPostBack="true" /> Verify
</td></tr>
</table>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane11" runat="server">
<Header>GGGGGGGGG</Header>
<Content>
HHHHHHHHHH:<br /><br />
<table cellpadding="0" cellspacing="0" width="750"><tr><td width="450" class="verificationtdleft">
<asp:Image ID="step4_image_thumbnail" runat="server" AlternateText="" />
</td><td width="300">
<asp:CheckBox ID="CB_Verification1" runat="server" AutoPostBack="true" /> Verify
</td></tr>
</table>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
Here's how I handle the checkbox check:
Private Sub CB_Verification0_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles CB_Verification0.CheckedChanged
MyAccordion.SelectedIndex = 1
End Sub
I'm causing the panels to change correctly, it's just that they don't animate like they do when I click the headers. When I click the checkbox to change the panel, the panel just disappears instantly and the new one appears instantly, but I want it to be animated as if I clicked the headers. Is there a way to cause the animation to happen when force changing the visible panel?
You can do this.. all client side, your problem is, when it is posting back, it is refreshing back to first one.. so you have to turn off AutoPost back.. here is sample that works..
<script language="javascript" type="text/javascript">
function toggle(id) {
var accordion = $get("<%= MyAccordion.ClientID%>");
accordion.AccordionBehavior.set_SelectedIndex(id);
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
AutoSize="None" FadeTransitions="true" TransitionDuration="250" FramesPerSecond="40"
RequireOpenedPane="false" SuppressHeaderPostbacks="true">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane10" runat="server">
<Header>
BBBBBBBBBB</Header>
<Content>
FFFFFFFF:<br />
<br />
<table cellpadding="0" cellspacing="0" width="750">
<tr>
<td width="450" class="verificationtdleft">
<asp:Image ID="step4_originalimage" runat="server" AlternateText="" />
</td>
<td width="300">
<input id="Checkbox1" type="checkbox" onclick="javascript:toggle(1);" />
Verify
</td>
</tr>
</table>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane11" runat="server">
<Header>
GGGGGGGGG</Header>
<Content>
HHHHHHHHHH:<br />
<br />
<table cellpadding="0" cellspacing="0" width="750">
<tr>
<td width="450" class="verificationtdleft">
<asp:Image ID="step4_image_thumbnail" runat="server" AlternateText="" />
</td>
<td width="300">
<input id="Checkbox2" type="checkbox" onclick="javascript:toggle(0);" />
Verify
</td>
</tr>
</table>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
This is beacuse you are changing the panel on the server side, so the page is sent to the client with the panel already expanded. You could register a script on your postback to trigger the change on the client side.
Take a look at this Blog