target panel of CollapsiblePanelExtender not visible on load, need to collapse then expand to see it - asp.net

I have inherited an app that has a CollapsiblePanelExtender. The codebehind populates the control that's inside the panel when it loads. I set the CollapsiblePanelExtender to be expanded in the codebehind, but the target panel isn't visible, even though the CollapsiblePanelExtender is expanded.
If I then collapse the CollapsiblePanelExtender, and then expand it again, the panel shows up. The html is there, but it isn't showing.
Any clues would be appreciated, thanks.
<div class="contentBoxTitle">
<asp:Panel ID="expandCTL" runat="server" Width="100%">
<asp:Image ID="expandIMG" ImageUrl="~/images/itemOpen.gif" runat="server" />
Client
</asp:Panel>
</div>
<asp:Panel ID="profilePanel1" runat="server" >
<div class="profileTable">
<table width="350" border="0" cellpadding="2" cellspacing="0">
<tr bgcolor="ffffff">
<th width="100" height="20" bgcolor="ffffff"><div align="right">Name:</div></th>
<td>
<asp:Label ID="name" runat="server" Text=""></asp:Label> </td>
</tr>
...
(more fields here)
...
</table>
</div>
</asp:Panel>
</div>
<ajaxToolkit:CollapsiblePanelExtender runat="server" TargetControlID="profilePanel1" CollapsedSize ="1" ID="profilePanelCollapser"
ExpandDirection="Vertical" ImageControlID="expandIMG" ExpandedImage="~/images/itemOpen.gif"
CollapsedImage="~/images/itemClosed.gif" Collapsed="false" ExpandControlID="expandCTL" CollapseControlID="expandCTL" />

Related

ASP.Net Printer Friendly Page

Morning All,
I am trying to make a web page printer friendly. I have managed to complete this for one of my pages perfectly fine by having another style sheet and the referencing this is my master page.
<link href="Styles/style2.css" rel="stylesheet" type="text/css" />
<link href="styles/style-print.css" media="print" rel="stylesheet" type="text/css" />
The problem that i have is the main page i wish to have a printer friendly option hold is made up of ASP. Panel controls and these also have 1 or 2 subpanels. I used these panels to reduce clutter and scrolling.
If i add the relevant div tags to the main page i seem to only get the headers of these Panels and do not get the sub headings or and the content within these panels unless i collapse these panels before i click the printer friendly button.
This is not a task that i wish the user to complete also the printer friendly page looks horrible as i would like to remove the panel / boxes. Is there a way for me to format this page so i dont get to see the panels but just the content when the users presses the pinter friendly button?
Regards
Betty.
Here is some sample code for my collopsible panels...
<table>
<tr>
<td style="width:528px">
<h5>Topic</h5>
</td>
<td style="width:154px">
<h5>Presenter</h5>
</td>
<td>
<h5>Time</h5>
</td>
</tr>
</table>
<!-- 1. HSE Issues (Main heading) -->
<asp:Panel ID="pnlHeaderHSERegIssues" runat="server" CssClass="pnl"
Width="740px">
<div style="float:left;">
1. Safety, Health, Environmental & Regulatory Issues
</div>
<div style="float:right;">
<asp:Label ID="lblShowHideHSERegIssues" runat="server"></asp:Label>
</div>
<div style="clear:both">
</div>
</asp:Panel>
<!-- 1.1 Safety Sub heading -->
<asp:Panel ID="pnlInfoHSERegIssues" runat="server" CssClass="pnlBody">
<asp:Panel ID="pnlHeaderSafety" runat="server" CssClass="pnlBody2" Width="740px">
<div style="float:left;">
1.1 - Safety Reviews
</div>
<div style="float:right;">
<asp:Label ID="lblShowHideSafety" runat="server"></asp:Label>
</div>
<div style="clear:both">
</div>
</asp:Panel>
<asp:Panel ID="pnlInfoSafety" runat="server" CssClass="pnlBody">
<table width="100%">
<tr>
<td style="width: 510px">
<asp:TextBox ID="txtSafety" runat="server" Height="100px"
style="font-family:Verdana" TextMode="MultiLine" Width="510px"></asp:TextBox>
</td>
<td style="width: 140px" valign="top">
<asp:TextBox ID="txtSafetyPresenter" runat="server" Height="97px"
style="font-family:Verdana" width="140px"></asp:TextBox>
</td>
<td style="width: 57px" valign="top">
<asp:TextBox ID="txtSafetyTime" runat="server" style="font-family:Verdana"
width="50px"></asp:TextBox>
</td>
</tr>
</table>
</asp:Panel>
</asp:Panel>
<!-- Collapse / un-collapse Panels (Main Heading) -->
<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender" runat="server"
CollapseControlID="pnlHeaderHSERegIssues" Collapsed="true"
CollapsedText="Show Details" ExpandControlID="pnlHeaderHSERegIssues"
ExpandDirection="Vertical" ExpandedText="Hide Details" ScrollContents="false"
TargetControlID="pnlInfoHSERegIssues" TextLabelID="lblShowHideHSERegIssues">
</asp:CollapsiblePanelExtender>
<!-- Collapse / un-collapse Panels (sub Heading) -->
<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
CollapseControlID="pnlHeaderSafety" Collapsed="true" CollapsedText="Show"
ExpandControlID="pnlHeaderSafety" ExpandDirection="Vertical" ExpandedText="Hide"
ScrollContents="false" TargetControlID="pnlInfoSafety"
TextLabelID="lblShowHideSafety">
</asp:CollapsiblePanelExtender>

asp.net ajax doesn't keep textarea values in async postback

I have a dialog popup with a textearea, two listboxes and one button. By selecting a value in the first listbox and pressing the button ">" the selected value is passed to the second listbox. This is done with asp.net ajax.
<td>
<div align="center">
<textarea style="height:50px; overflow:hidden;";rows="20"
cols="40"
id="editor1"
class="tinymce">
</textarea>
</div>
</td>
I put the 2 listboxes and the button between asp.net uploadpanel. Like this:
<td>
<asp:UpdatePanel runat="server" id="updatePanel1">
<ContentTemplate>
<table width="100%" align="left">
<tr>
<td colspan="5">
<hr align="left" style="width:95%" />
</td>
</tr>
<tr>
<td valign="top">
<cc1:SWCListBox
ID="SWCListBox1"
runat="server"
Width="100"
SelectionMode="Single"
CssClass="VW1">
</cc1:SWCListBox>
</td>
<td
valign="top"
width="50"
align="center">
<cc1:SWCButton
Text=" > "
ID="SWCBtnAddValue"
CssClass="VW1 VWButton"
runat="server"
ToolTip="Add to list"
OnClick="AddValue_Click"
CausesValidation="false"
/>
<td valign="top">
<cc1:SWCListBox
id="SWCListBox2"
CssClass="VW1"
runat="server"
Width="100"
SelectionMode="Single"
/>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
The probles is that when I type something in the textarea and make an async postback the text typed fades.
How can I keep the textarea value within async postbacks?
thank you.
This problem is because you use UpdatePanel, and the textarea is not an asp.net control. You have two solutions.
1) Make it asp.net control by placing the run="server" (or)
2) Place the post back value manually as:
<div align="center">
<textarea style="height:50px; overflow:hidden;";rows="20"
cols="40"
id="editor1"
name="editor_1"
class="tinymce">
<asp:Literal runat="server" id="txtEditor1" />
</textarea>
</div>
and on code behind
txtEditor1.Text = Server.HtmlEncode(Request.Form["editor_1"].ToString());
(because you use UpdatePanel its important to use Literal to add this value and not use <%=%>, or else its throw an error.

asp.net model popup extender

I am using ajax model popup extender in my asp.net page. From my page , on click of Save button , i popup panel using model popup extender.
If i cause postback from model popup , my backend (asp.net) form controls are coming front (ie) in the panel.
Here is my code snippet,
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="up_Save" runat="server">
<ContentTemplate>
<div>
<table border="0" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td align="center" colspan="4">
<asp:Button ID="btn_Save" runat="server" Text="Save" Width="15%" OnClick="btn_Save_Click" />
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<cc1:ModalPopupExtender ID="BarrierRelayPopup" runat="server" PopupControlID="PopUp_Panel" TargetControlID="hiddenfield" CancelControlID="btn_Cancel_PopUp">
</cc1:ModalPopupExtender>
<asp:HiddenField ID="hiddenfield" runat="server" />
<asp:Panel runat="server" ID="PopUp_Panel" Width="50%" Height="30%" BackColor="Gainsboro" BorderStyle="Groove" >
<asp:UpdatePanel runat="server" ID="PopUp">
<ContentTemplate>
<table>
<tr>
<td align="left">
<asp:Label ID="lbl_Heading" runat="server" Text="Select Relay and Barrier :"></asp:Label>
</td>
</tr>
<tr>
<td>
<B_R:Barrier_Relay ID="Barrier_Relay" runat="server"/>
</td>
</tr>
<tr>
<td align="center">
<asp:Button ID="btn_OK" runat="server" Width="60px" Text="OK" OnClick="btn_OK_Click" /> <asp:Button ID="btn_Cancel_PopUp" runat="server" Width="60px" Text="Cancel" OnClick="btn_Cancel_PopUp_Click"/>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</form>
Can anybody help me in this.
If I understand you right I think what you want to do is wrap the controls inside the modal in an updatepanel. This will prevent the modal from closing if you need to do a postback from within the popup.

defaultbutton is not working on my first panel, but works well with the rest of them?

I have a search panel in my master page, which seems to be getting called when typing in another panel and hitting enter, even though the panel has a different defaultButton. The weird thing is the second and third panels work well, which ever one I put at the top calls the search button.
My search panel in my master page
<asp:Panel runat="server" ID="pnlSearch" DefaultButton="btnSearch">
<asp:TextBox ID="txtSearch" CssClass="fld" runat="server" Width="160" Text="Search..."
onclick="this.value='';" CausesValidation="false"></asp:TextBox>
<asp:ImageButton ID="btnSearch" ImageUrl="~/Images/search_arrow.gif" runat="server"
OnClick="btnSearch_Click" CausesValidation="false" />
</asp:Panel>
and my other panels inside a control(only displaying two, the first one calls btnSearch, but the second one works fine.
<asp:Panel DefaultButton="btnViewPage" ID="pnlViewPage" runat="server" CssClass="floatLeft">
<table>
<tr class="adminRow">
<td class="adminLeftCol">
View Page:
</td>
<td>
<asp:TextBox ID="txtViewPage" Width="35px" runat="server"></asp:TextBox>
</td>
<td class="adminRightCol">
<asp:ImageButton ID="btnViewPage" runat="server" Text="Go" Width="75%" ImageUrl="~/Images/search_arrow.gif"
OnClick="btnViewPage_Click" ImageAlign="AbsBottom" CausesValidation="false" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel DefaultButton="btnEditpage" ID="pn1Edit" runat="server" CssClass="floatLeft">
<table width="100%">
<tr class="adminRow">
<td class="adminLeftCol">
Edit Page:
</td>
<td>
<asp:TextBox ID="txtEditPage" Width="35px" runat="server"></asp:TextBox>
</td>
<td class="adminRightCol">
<asp:ImageButton ID="btnEditpage" runat="server" Text="Go" Width="75%" ImageUrl="~/Images/search_arrow.gif"
OnClick="btnEditpage_Click" ImageAlign="AbsBottom" CausesValidation="false" />
</td>
</tr>
</table>
</asp:Panel>
I've seen cases where the panel had to be inside an actual TD (the defaultbutton had to be a direct inner element of the panel). Have you tried this / can you try this?

Refresh gridview inside update panel after modal popup closes

I'm having a heck of a time trying to get a gridview to refresh its data after a modalpopup adds a new record to the database. Ive tried the following with no luck.
<cc2:ModalPopupExtender ID="mdlPopup" runat="server" OnOkScript="__doPostBack('<%= gvRecommendations.ClientID %>', '');" BackgroundCssClass="modalBackground"
TargetControlID="lbtnRecommendationsAddNew" PopupControlID="pnlAddNewRecommendation">
</cc2:ModalPopupExtender>
<asp:Panel ID="pnlAddNewRecommendation" runat="server" CssClass="confirm-dialog" style="display:none;" Width="500px">
<div class="inner">
<h2>New Suppressed Recomendation</h2>
<div class="base">
<table width="100%" cellpadding="5" cellspacing="0">
<tr>
<td align=left>
<asp:DropDownList ID="ddlRecomendations" runat="server" />
</td>
</tr>
<tr>
<td align="left">
<asp:Button ID="btnAddRecommendation" OnClick="btnAddRecommendation_Click" runat="server" Text="Submit" />
|
<asp:LinkButton ID="btnCancel" runat="server" Text="Cancel" ForeColor="Blue" />
<asp:LinkButton id="lbtnTopLeft" runat="server" CssClass="close" />
</div>
</td>
</tr>
</table>
</div>
</div>
</asp:Panel>
Ive also tried adding this with no luck after adding the record to the DB:
this.gvSupressedRecommendations.DataBind();
this.UpdatePanel1.Update();
I know im close but can't seem to get this to refresh.
Try reassigning your datasource before you rebind. This should work. I.e.
gvSupressedRecommendations.DataSource = <...>;
gvSupressedRecommendations.DataBind();

Resources