Hi. I got the same scenario in one my application I involved. It could be helpful to solve this problem..
The requirement was- I have a page with three gridview, some entry fields, some text etc., While user clicks print, there should a print preview screen open with two button – Print and cancel. The popup screen should have some text at top, after a grid,
and some security confidential information etc,.
Declared a button like this
<input type="button" id="btnPrint" value="Print" style="width:100px" onclick="Print()" />
The javascript code is
printWindow.document.write(document.getElementById('divUserList').innerHTML); // Get gridview HTML code and writing to the window, here divUserList is div control which contains the gridview we need.
var sUserCommentsHTML = document.getElementById('divUserList').innerHTML // Get another one gridview
sUserCommentsHTML = sUserCommentsHTML.split("class=GridImage").join(""); // removing the class, here I dont need any style
printWindow.document.write(sUserCommentsHTML); // Writing to the document
Here one of a gridview declaration could be like ..
<div id="divUserList">
<%--Inside you can declare any control. When you get innerHTML of divUserList, all the controls you are refering to print --%>
<asp:GridView id="GridViewUser" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"
CellSpacing="1" GridLines="None" DataKeyNames="Id"
BackColor="White" CellPadding="3" BorderWidth="2px" BorderStyle="None" BorderColor="White"
>
<FooterStyle BackColor="#C6C3C6" ForeColor="Black"></FooterStyle>
<Columns>
All Columns
</Columns>
<RowStyle BackColor="#DEDFDE" ForeColor="Black" Height="20px"></RowStyle>
<SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White"></SelectedRowStyle>
<PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right"></PagerStyle>
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#E7E7FF"></HeaderStyle>
<AlternatingRowStyle BorderStyle="Solid" BorderWidth="0px"></AlternatingRowStyle>
</asp:GridView>
</div>
In this way you can write whatever content u need to print on the print from the actual screen. As no postback, it could be fast also..
Thirumalai_p...
Participant
1799 Points
291 Posts
Re: creating printable version of web page
May 02, 2009 05:15 PM|LINK
Hi. I got the same scenario in one my application I involved. It could be helpful to solve this problem..
The requirement was- I have a page with three gridview, some entry fields, some text etc., While user clicks print, there should a print preview screen open with two button – Print and cancel. The popup screen should have some text at top, after a grid, and some security confidential information etc,.
Declared a button like this
<input type="button" id="btnPrint" value="Print" style="width:100px" onclick="Print()" />
The javascript code is
<script type="text/javascript" language="javascript">
function Print()
{
printWindow= window.open ("", "mywindow", "location=1,status=1,scrollbars=1,width=600,height=500");
printWindow.document.write('<div style="width:100%;text-align:right">');
printWindow.document.write('<input type="button" id="btnPrint" value="Print" style="width:100px" onclick="window.print()" />');
printWindow.document.write('<input type="button" id="btnCancel" value="Cancel" style="width:100px" onclick="window.close()" />');
printWindow.document.write('</div>');
printWindow.document.write(document.getElementById('divUserList').innerHTML); // Get gridview HTML code and writing to the window, here divUserList is div control which contains the gridview we need.
var sUserCommentsHTML = document.getElementById('divUserList').innerHTML // Get another one gridview
sUserCommentsHTML = sUserCommentsHTML.split("class=GridImage").join(""); // removing the class, here I dont need any style
printWindow.document.write(sUserCommentsHTML); // Writing to the document
printWindow.document.close();
printWindow.focus();
}
</script>
Here one of a gridview declaration could be like ..
<div id="divUserList">
<%--Inside you can declare any control. When you get innerHTML of divUserList, all the controls you are refering to print --%>
<asp:GridView id="GridViewUser" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"
CellSpacing="1" GridLines="None" DataKeyNames="Id"
BackColor="White" CellPadding="3" BorderWidth="2px" BorderStyle="None" BorderColor="White"
>
<FooterStyle BackColor="#C6C3C6" ForeColor="Black"></FooterStyle>
<Columns>
All Columns
</Columns>
<RowStyle BackColor="#DEDFDE" ForeColor="Black" Height="20px"></RowStyle>
<SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White"></SelectedRowStyle>
<PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right"></PagerStyle>
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#E7E7FF"></HeaderStyle>
<AlternatingRowStyle BorderStyle="Solid" BorderWidth="0px"></AlternatingRowStyle>
</asp:GridView>
</div>
In this way you can write whatever content u need to print on the print from the actual screen. As no postback, it could be fast also..
Thanks, Thirumalai M
java script
Thirumalai Muniswamy My Blog
Mark as Answer if this reply helps you.