I am using the ASP.NET AJAX Control Kit and I am having a problem using a collapsible panel in my code. I have the following code:
<table><tr>
<td class="bg">
<a class="bg" href="javascript:void(0);">
<asp:CheckBox runat="server" ID="chkSMSGrossRevenue" Text="Gross Revenue (Daily, Monthly, Yearly)" /></a>
<asp:Panel runat="server" ID="pnlSMSGrossRevenue" Height="0">
testing
</asp:Panel>
</td></tr></table>
<cc1:CollapsiblePanelExtender runat="server" ID="cpeSMSGrossRevenue" TargetControlID="pnlSMSGrossRevenue"
ExpandControlID="chkSMSGrossRevenue" CollapseControlID="chkSMSGrossRevenue">
</cc1:CollapsiblePanelExtender>
What I'm trying to do is expand my panel whenever there is a checkmark in my checkbox and collapse it when there is no checkmark. The problem is, I always see the work "test", which is in my panel...so I'm assuming its never collapsing. When I click the checkbox, it collapses, but then immediately re-expands again. Can anyone tell me what I'm doing wrong?
since you are opening the page with the box unchecked, set the property of the collapsible panel extender to start collapsed
Collapsed="true"
I figured out the issue. It has to do with my tag at the top of my page
Setting CollapsedSize="1" solves the error
Related
This issue occurs in ASP.NET 4.6 and I've seen a few similar posts, but they usually referred not to the same control (built-in here) or ended up with a conclusion "just use a different/external control here: html link", which is not really an option for me.
First, some code
Site.Master
<div id="HeaderProper">
<div id="HeaderProperTitle">
<asp:Menu ID="HeaderProperMenu" runat="server" DataSourceID="HeaderProperSiteMap" Orientation="Horizontal"
BackColor="#ff2400"
RenderingMode="List"
StaticEnableDefaultPopOutImage="false"
StaticDisplayLevels="2"
StaticHoverStyle-BackColor="#000000"
StaticMenuItemStyle-HorizontalPadding="15px"
StaticMenuItemStyle-Height="42px"
DynamicHoverStyle-BackColor="#000000"
DynamicMenuItemStyle-HorizontalPadding="5px"
DynamicMenuItemStyle-BackColor="#ff2400"
DynamicMenuItemStyle-Font-Size="24px"/>
<asp:SiteMapDataSource ID="HeaderProperSiteMap" runat="server" />
</div>
SomePage.aspx
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h1>Complete List</h1>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="SortOrderSelection">
Sort by
<asp:DropDownList ID="cbxSortBy" runat="server" AutoPostBack="true"
OnSelectedIndexChanged="cbxSortBy_SelectedIndexChanged" />
</div>
<asp:Panel ID="SortedList" CssClass="top-margin five-columns" runat="server" />
<asp:Panel ID="Summary" CssClass="top-margin" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
How to reproduce:
Choose an item in the DropDownList, which causes partial postback. The menu then stops working, that is - the drop down/hover menu doesn't open, but the first level links seem to be functional. Refreshing the whole page fixes the problems (duh?).
And, contrary to what I've found:
1) Menu is NOT inside an UpdatePanel, which I acknowledge is unsupported solution
2) Menu works fine when RenderingMode is set to Table, but generates a very ugly html code, which I would like to avoid. Not mentioning additional quirks in margins that have to be adjusted with ugly fixes.
3) I tried setting z-index: 1000...0 !important as suggested by some sources (on most menu related styles), but to no avail.
I would be grateful for any suggestions how this can be resolved while still using asp:Menu control in List rendering mode, possibly with as least intervention as possible. My point here is to use built-in functionality and keep the code clean from unnecessary JS, jQuery (if possible at all; otherwise I'd rather open a Connect case for this issue).
Thank you in advance.
Putting your menu into an update panel should work because it will indicate to the server to update it after the postback. Without this, any repost can create the risk of losing some events in your element. Refreshing works because you are refreshing the whole page and not only some element of it.
When the selection of the radio buttons change I would like to show/hide the panel in the next table cell. I have it hiding and showing fine but each time it causes the page to refresh to the top. Is their a way to stop that refresh? I would like to hide and show the panel dynamically.
<table>
<tr>
<td>
<asp:RadioButtonList runat="server" ID="rblPlayerStatus" AutoPostBack="true" >
<asp:ListItem>Free Agent</asp:ListItem>
<asp:ListItem>I have teammate</asp:ListItem>
</asp:RadioButtonList>
</td>
<td>
<asp:Panel runat="server" ID="pnlTeamMate">
<asp:Label runat="server" ID="lblTeamMate" Text="Choose Teammate" />
</asp:Panel>
</td>
</tr>
</table>
Use the AJAX.ASP.Net library - then you add a ScriptManager item, and an UpdatePanel. Anything within the UpdatePanel will update through AJAX, not a full page refresh.
Do you have any server side logic based on which show and hide the panel. If yes then you could use update panel control. If it is just client side logic such as
If Free Agent is select show FreeAgent Panel else Team Panel
use javascript or rather jquery to achieve the same.
From your code, I can't see where you hide and show the panel. You could use an updatepanel, but that is best used when you need to retrieve more information from the server.
If you simply want to show and hide the panel, you can do it better with Javascript, by adding some code to the OnClick event to set the panel's visibility css attribute. There are a few tutorials on google about how to do this. Something like this should be sufficient to get you started.
Solution would be either using AJAX (UpdatePanel and ScriptManager) or removing
AutoPostback = true and using JavaScript to display/hide the panel
I am currently moving some form fields on an existing webform into a modal popup window using the asp.net toolkit extender. One of the fields uses the toolkit's toggle button extender on a checkbox a works quite well. When I move the checkbox and extender into the modal popup div, the toggle button extender stops working.
After confirming the problem, I decided to try using a jquery plug-in called checkbox that provides the same function. Again this plugin worked as advertised until I moved it into the modal window div. I had hoped to avoid hand rolling a solution.
I am guessing that the problem has something to to with css positioning. I would love to hear possible fixes before I build a solution from scratch.
Edit
Here is my original approach with toggle button extender:
<!-- works fine here -->
<asp:CheckBox ID="chkUSDAdd" runat="server" CssClass="PriceEntryToggle" Checked="true" Visible="false" />
<ajaxToolkit:ToggleButtonExtender ID="tglCurrencyAdd" runat="server"
TargetControlID="chkUSDAdd"
CheckedImageAlternateText="Click here to enter price in CAD"
UncheckedImageAlternateText="Click here to enter price in USD"
UncheckedImageUrl="~/images/ButtonCAD.gif"
CheckedImageUrl="~/images/ButtonUSD.gif" />
<asp:Panel ID="pnlAddTransaction" runat="server" Width="600px" Height="300px" CssClass="ModalWindow">
<!-- doesn't work here - outside UpdatePanel but inside modal window div-->
<asp:UpdatePanel ID="udpAddTransaction" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<!-- This is the desired location but doesnt work here -->
<asp:CheckBox ID="chkUSDAdd" runat="server" CssClass="PriceEntryToggle" Checked="true" Visible="false" />
<ajaxToolkit:ToggleButtonExtender ID="tglCurrencyAdd" runat="server"
TargetControlID="chkUSDAdd"
CheckedImageAlternateText="Click here to enter price in CAD"
UncheckedImageAlternateText="Click here to enter price in USD"
UncheckedImageUrl="~/images/ButtonCAD.gif"
CheckedImageUrl="~/images/ButtonUSD.gif" />
<!-- etc-->
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="hdnInvestmentID" />
</Triggers>
</asp:UpdatePanel>
<asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="mpeAddTransaction" runat="server"
TargetControlID="pnlAddTransaction" PopupControlID="pnlAddTransaction"
CancelControlID="btnCancel" OnCancelScript="hideAddTransactionPopup()"
BackgroundCssClass="modalBackground" />
I have also now tried placing a hidden field and an image and writing jquery click function. This also results in the same issue (stops working inside modal div).I can get code to run by hard coding onclick event attribute. I would love to understand why and if there are any more elegant ways to work around this. I guess I could try a jquery modal popup plugin, but I didn't plan to rewrite this whole page.
Take a look at your ModalPopupExtender Attributes. TargetControlID and PopupControlID are the same panel "pnlAddTransaction". The TargetControlID is the control that triggers the control at PopupControlID to display.
I'm using AJAX.Net (3.5) inside a usercontrol.
The usercontrol contains an UpdatePanel, and inside the UpdatePanelthere is a MultiView.
The ScriptManager is included in the page that act as container for the usercontrol.
To switch between views the usercontrol contains a simple button.
When I click it, the View is changed so the old content is hidden and new content is displayed.
My problem is that the content isn't hidden at all.
The view changes and the new content is displayed, but the old one remains on the page.
To isolate the problem, I tried changing the multiview and switching visibility of a simple label, but the behavior is the same.
Any ideas?
oh I understand. It's all right then. The problem is not of Ajax here. It's just you cannot embed something in <table> tags. In this case, you can try something different than the <table> control. Maybe a <div> or something else. I don't know exactly what sort of situation you have. Maybe you explain the result you want to achieve so I can give you some advice.
Regards
It seems that AJAX.Net doesn't work very well if you have part of a table outside the UpdatePanel.
On my control I want to show or hide some rows of a table. I included only the tr and td tags inside the updatepanel.
To reproduce the problem:
<table>
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<tr>
<td>
<asp:Label ID="lblToShow" runat="server" Text="Label to show" Visible="false" />
<br />
<asp:Label ID="lblToHide" runat="server" Text="Label to hide" />
</td>
</tr>
</ContentTemplate>
</asp:UpdatePanel>
</table>
If you change the visibility using:
lblToShow.Visible = true;
lblToHide.Visible = false;
The text of both labels are shown on the page (lblToHide does not hide)
If you move the table tags inside the UpdatePanel everything works fine.
call
updatepanel.Update()
after you make the changes to your updatepanel
or try
updatepanel.Controls.Clear();
What is the difference between <asp:Panel > and <asp:PlaceHolder > in ASP.NET?
When should you use one over the other?
A panel expands to a span (or a div), with it's content within it. A placeholder is just that, a placeholder that's replaced by whatever you put in it.
The Placeholder does not render any tags for itself, so it is great for grouping content without the overhead of outer HTML tags.
The Panel does have outer HTML tags but does have some cool extra properties.
BackImageUrl: Gets/Sets the
background image's URL for the panel
HorizontalAlign: Gets/Sets the
horizontal alignment of the parent's
contents
Wrap: Gets/Sets whether the
panel's content wraps
There is a good article at startvbnet here.
PlaceHolder control
Use the PlaceHolder control as a container to store server controls that are dynamically added to the Web page. The PlaceHolder control does not produce any visible output and is used only as a container for other controls on the Web page. You can use the Control.Controls collection to add, insert, or remove a control in the PlaceHolder control.
Panel control
The Panel control is a container for other controls. It is especially useful when you want to generate controls programmatically, hide/show a group of controls, or localize a group of controls.
The Direction property is useful for localizing a Panel control's content to display text for languages that are written from right to left, such as Arabic or Hebrew.
The Panel control provides several properties that allow you to customize the behavior and display of its contents. Use the BackImageUrl property to display a custom image for the Panel control. Use the ScrollBars property to specify scroll bars for the control.
Small differences when rendering HTML: a PlaceHolder control will render nothing, but Panel control will render as a <div>.
More information at ASP.NET Forums
I weird bug* in visual studio 2010, if you put controls inside a Placeholder it does not render them in design view mode.
This is especially true for Hidenfields and Empty labels.
I would love to use placeholders instead of panels but I hate the fact I cant put other controls inside placeholders at design time in the GUI.
As mentioned in other answers, the Panel generates a <div> in HTML, while the PlaceHolder does not. But there are a lot more reasons why you could choose either one.
Why a PlaceHolder?
Since it generates no tag of it's own you can use it safely inside other element that cannot contain a <div>, for example:
<table>
<tr>
<td>Row 1</td>
</tr>
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</table>
You can also use a PlaceHolder to control the Visibility of a group of Controls without wrapping it in a <div>
<asp:PlaceHolder ID="PlaceHolder1" runat="server" Visible="false">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</asp:PlaceHolder>
Why a Panel
It generates it's own <div> and can also be used to wrap a group of Contols. But a Panel has a lot more properties that can be useful to format it's content:
<asp:Panel ID="Panel1" runat="server" Font-Bold="true"
BackColor="Green" ForeColor="Red" Width="200"
Height="200" BorderColor="Black" BorderStyle="Dotted">
Red text on a green background with a black dotted border.
</asp:Panel>
But the most useful feature is the DefaultButton property. When the ID matches a Button in the Panel it will trigger a Form Post with Validation when enter is pressed inside a TextBox. Now a user can submit the Form without pressing the Button.
<asp:Panel ID="Panel1" runat="server" DefaultButton="Button1">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ErrorMessage="Input is required" ValidationGroup="myValGroup"
Display="Dynamic" ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" ValidationGroup="myValGroup" />
</asp:Panel>
Try the above snippet by pressing enter inside TextBox1