ASP.Net Printer Friendly Page - asp.net

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>

Related

Put component next to User Control

I have a table in which I put a User Control in one row. I would like to put something to its right (like divide the td in two)
<table id="table1" cellspacing="0" cellpadding="0" width="100%" border="0">
<tr valign="top">
<td>
<div>
<uc3:Quicksportselection ID="QuickSportSelection1" runat="server"></uc3:Quicksportselection>
</div>
<div class="sBody">
<hr />
<asp:RadioButtonList runat="server" ID="SponsorListRad" RepeatDirection="Vertical" RepeatLayout="Flow" CssClass="labels">
<asp:ListItem Text="Eurosport" Value="Eurosport"></asp:ListItem>
<asp:ListItem Text="Discovery" Value="Discovery"></asp:ListItem>
</asp:RadioButtonList>
</div>
</td>
</tr>
</table>
Doing such thing will put my 'SponsorListRad' UNDER the UserControl. How can I put it next to it on the right?
The <hr> tag defines a thematic break in an HTML page and it's used to separate content and in this case - should be delete.

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

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" />

disable postback refresh on master page

I have a master page with three image buttons on. In the content below the master page i have listboxes and when i make a selection of an item on the list it opens a new list in the content. The problem is that when i make a selection the whole page is reloaded and the master page with the images reloads and makes like 1 second to come back all together. This is not very convenient as you may understand and its not for personal use program. Is it possible to make the post back work only for the field below and leave the master page untouched?
master page:
<%# Master Language="VB" CodeFile="MyMasterPage.master.vb" Inherits="MyMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div id="topContent" align="center">
<table>
<tr>
<td style="width:400px;" align="right" axis="top">
</td>
<td>
<asp:Image ID="Image1" runat="server" ImageUrl="~/PetrolinaLetters.png" />
</td>
<td style="width:400px; text-align:center;" valign="top">
<asp:Label ID="userText" runat="server" BorderStyle="Double" Width="130px" Font-Bold="True"></asp:Label>
</td>
</tr>
</table>
<div>
<table>
<tr>
<td style="width:170px;">
<asp:ImageButton ID="ImageButton1" runat="server" Height="30px" ImageUrl="~/orderButton.png"
Width="160px" />
</td>
<td style="width: 170px;">
<asp:ImageButton ID="ImageButton2" runat="server" Height="30px" ImageUrl="~/orderHistory.png"
Width="160px" />
</td>
<td style="width:170px;">
<asp:ImageButton ID="ImageButton3" runat="server" Height="30px" ImageUrl="~/changePass.png"
Width="160px" />
</td>
</tr>
</table>
</div>
<br />
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
you will need to do partial postbacks (AKA: AJAX) in order to untouch the rest of your page elements, and still have the needed behavior from the list element.
A- Use jquery to capture the changed value, go to your web-server, and return back with the data (fast, and recommended, but need some work)
some useful examples:
http://jquerybyexample.blogspot.com/2012/04/how-to-populate-aspnet-dropdownlist.html
jQuery-AJAX to rebind dropdown list to results from stored procedure
http://amin-sayed.blogspot.com/2008/10/in-this-example-ill-demonstrate-how-to.html
B- Use an update panel around the controls that you need to update them without the rest of the page ( not that fast from a performance perspective, but extermly easy to implement)
http://www.asp.net/web-forms/tutorials/aspnet-ajax/understanding-asp-net-ajax-updatepanel-triggers
http://www.asp.net/ajax/documentation/live/tutorials/IntroductionUpdatePanel.aspx
http://www.netrostar.com/How-to-Use-NET-Update-Panel

HTML Editor inside Ajax Collapsible Panel Extender not being displayed in IE 6 for asp.net web page

I have a Ajax HTMLEditor in my web page inside a panel which is targeted by the collapsible panel extender.
When the panel is expanded, there is a big empty space without any of the controls inside the panel being displayed.
The issue here is the panel is expanded but there is nothing visible inside it including any buttons and the Html editor. When i scroll up and down though the controls sometimes become visible.
<cc1:CollapsiblePanelExtender ID="ColPnlExtEvents" runat="server" TargetControlID="pnlAddContentEvents"
BehaviorID="ColPnlExtEventsBehavior" TextLabelID="lblShowEvents" SuppressPostBack="true"
CollapsedImage="~/images/expand.jpg" ExpandedImage="~/images/collapse.jpg" CollapsedText="(Show Details...)"
ExpandedText="(Hide Details...)" ImageControlID="ImgBtnEvents" Collapsed="True" CollapsedSize="1"
CollapseControlID="pnlEvents" ExpandControlID="pnlEvents">
</cc1:CollapsiblePanelExtender>
<asp:Panel Style="cursor: pointer" ID="pnlEvents" runat="server" CssClass="collHeader">
<div style="padding: 2px; cursor: pointer; vertical-align: middle;">
<div style="float: left;">
<asp:Label ID="abnormalEventsLabel" runat="server">Add Abnormal Events</asp:Label></div>
<div style="float: left; margin-left: 20px;">
<asp:Label ID="lblShowEvents" runat="server">(Show Details...)</asp:Label>
</div>
<div style="float: right; vertical-align: middle;">
<asp:ImageButton ID="ImgBtnEvents" runat="server" ImageUrl="~/images/expand.jpg"
AlternateText="(Show Details...)" />
</div>
</div>
</asp:Panel>
<asp:Panel Style="overflow: hidden" ID="pnlAddContentEvents" runat="server" CssClass="collPanel"
Height="0px">
<table id="tblEventsDetails" width="100%" runat="server">
<tr>
<td align="left">
<a class="labelText">Description</a>
</td>
<td style="width: 75%">
<uc:RichTextBox ID="abnormalEventsDescriptionRichTextBox" runat="server" />
</td>
</tr>
<tr>
<td class="blankRow">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<asp:LinkButton CssClass="btnSimpleSave" ID="abnormalEventSaveLinkButton" runat="server"
OnClick="abnormalEventSaveLinkButton_Click" OnClientClick="javascript:return ParticularClosureRichTextBoxValidation('ctl00_cphMain_abnormalEventsDescriptionRichTextBox_HTMLText','Abnormal Events');">Save</asp:LinkButton>
<asp:LinkButton CssClass="btnSimpleCancelForSubSections" ID="abnormalEventCancelLinkButton"
runat="server" CausesValidation="false" OnClick="abnormalEventCancelLinkButton_Click">Cancel</asp:LinkButton>
</td>
</tr>
</table>
</asp:Panel>
Many times, different JS libraries does not mix well today - you might have encountered the same.
Personally, I prefer pure js based approaches (such as jquery or jquery plugin) over control based approaches (as done in Ajax Control Toolkit). For collapsible panel, you can use jquery sliding functions. For example, see this fiddle that I had put up for another SO question to illustrate multiple collapsible panels

Simple jQuery task failing: hide child elements of <div> tag

There has to be a simple explanation for this.
I have a parent <div> tag containing a number of child divs that need to be hidden depending on their class. Problem is, I can't even seem to get a handle to my parent div. What on earth is the problem here? I'm going out of my gourd.
The jQuery code (snippet) looks like this:
$(function() {
$('#dasummary').children().hide();
The offending <div> section and all its content is as follows:
<asp:ListView ID="lvLedger" runat="server" DataSourceID="ldsLedger">
<LayoutTemplate>
<h2>Current Day Activity Summary</h2>
<div id="#dasummary">
<div id="itemPlaceholder" runat="server" />
</div>
</LayoutTemplate>
<ItemTemplate>
<div id="toggleRow" runat="server" class="group">
<asp:Image ID="imgToggle" runat="server"
ImageUrl="~/App_Themes/SunDIAL/images/maximize.png"
ImageAlign="Left" />
<%# Eval("Key") %> (<%# Eval("Count") %> entries)
</div>
<!-- Add nested ListView control for individual items here -->
<asp:ListView ID="lvItems" runat="server" DataSource='<%# Eval("Tasks") %>'>
<LayoutTemplate>
<div class="activity_summary">
<table>
<thead>
<tr>
<th class="first" />
<th>Day</th>
<th>Job</th>
<th>Batch</th>
<th>Duration</th>
</tr>
</thead>
<tbody>
<tr id="itemPlaceholder" runat="server" />
</tbody>
</table>
</div>
</LayoutTemplate>
<ItemTemplate>
<tr id="item" runat="server" class="itemRow">
<td class="first" />
<td>
<h4>
<a><%# Eval("Day") %></a>
</h4>
</td>
<td><%# Eval("Project") %></td>
<td><%# Eval("Name")%></td>
<td><%# Eval("Hours") %>:<%# Eval("Minutes","{0:00}") %></td>
</tr>
</ItemTemplate>
</asp:ListView>
</ItemTemplate>
</asp:ListView>
The rendered HTML looks (as far as I can see) just fine. Let me know if you want the whole thing; here's the important bit:
<div id="#dasummary">
<div id="ctl00_ContentPlaceHolder1_dashboardFrame_ctl00_ActiveDayLedger1_lvLedger_ctrl0_toggleRow" class="group">
<img id="ctl00_ContentPlaceHolder1_dashboardFrame_ctl00_ActiveDayLedger1_lvLedger_ctrl0_imgToggle" src="App_Themes/SunDIAL/images/maximize.png" align="left" style="border-width:0px;" />
Wednesday (2 entries)
</div>
<!-- Add nested ListView control for individual items here -->
<div class="activity_summary">
There has to be a reason I'm failing at such a simple operation. Can you spot it?
The id of your div is wrong. In the html it must be dasummary, not #dasummary, so you can grab it by jQuery with $("#dasummary")
"#" in jQuery selector means that jQuery should select elements by id. So, in your case there are two ways:
Use id without "#"
Change jQuery query to smth like "##dasummary". It should work.
That's right, you should have
<div id="dasummary">
Also, it might be needed to use the each function:
$("div", "#dasummary").each(function() {
$(this).hide();
});

Resources