Javascript Print gridview in Div with CSS

Question

I'm trying to print a particular DIV. there are few lines of header, and there is a gridview with some css applied. after a long search, I found a way to print the div to a different page, in order to not loose the focus on the main page. the problem is that the gridview is printed without any border, and it's useless in that way. I guess the problem is the CSS that I used for the gridview, but I don't know how to solve this.

this is the div

<div id="tabella">
<asp:label font-bold="true" Font-Italic ="true" ID="lbIdStabile" Text="Cod. Stabile: " runat="server"> 
<asp:label Text='<%# Bind("Id")%>' ID ="lbIdStb" runat="server"/></asp:label>
<br />
<asp:label ID="TextBox1" font-bold="true" Text='<%# Bind("indstab")%>' runat="server"/>
<br /> <br />
<asp:GridView ID="GrigliaPdr" CssClass="gridtext align-left table table-bordered" runat="server" RowStyle-Wrap="false" AutoGenerateColumns="False" CellPadding="0" DataKeyNames="Id" DataSourceID="SqlPDR" GridLines="None" AllowPaging="false" AllowSorting="false" AlternatingRowStyle-CssClass="gridAlternate" SelectedRowStyle-CssClass="gridSelect"  showheader ="true">
<Columns>      
<asp:BoundField DataField="Id" Visible="False"/>
<asp:BoundField DataField="piano"  HeaderText="Piano" /> 
</Columns> 
</asp:GridView>
<br />       
<asp:Label ID="Label1" runat="server" Text='<%# Eval("data_odierna", "{0:dd/MM/yyyy HH:mm}") %>'>
</asp:Label>
</div>

this is my print function

function printDiv(divName) {
var prtContent = document.getElementById(divName);
var WinPrint = window.open('');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();

and this is the button that calls the print function

<asp:Button ID="BT_PrintPDR" runat="server" class="win-command"  title="Stampa PDR" cssclass="icon-search" Text="Stampa PDR" type ="button" OnClientClick="printDiv('tabella');" > </asp:Button>

any help would be really appreciated

score 0 · Answer 1 · answered Feb 13 '18 at 19:01

0

in your CSS add media query for print and apply the same styling to get border and other things. Let me know if it works for you!

answered Feb 13 '18 at 19:01

Bp2018

1
2

score 0 · Accepted Answer · answered Feb 13 '18 at 19:16

You should add references to your original CSS files into the document contained by WinPrint. You can do this by adding the following lines between the 4th and 5th line of your printDiv function:

 var head  = WinPrint.document.getElementsByTagName('head')[0];
 var link  = WinPrint.document.createElement('link');

 link.rel  = 'stylesheet';
 link.type = 'text/css';
 link.href = 'http://yourWebSite/css/yourCSSFile.css';
 link.media = 'all';
 head.appendChild(link);

Hope it helps.

EDIT 1 Here's an excellent answer to load CSS files using JavaScript

That's great Alfaking. If it is ok for you, please [accept](https://stackoverflow.com/help/someone-answers) my answer. Thanks. — Emilio Lucas Ceroleni, Feb 15 '18 at 15:03

Javascript Print gridview in Div with CSS

2 Answers2