Printing from a Web programmer perspective is a quite tricky task. Because what we really able to control is on the server side, while the printing is done on the client side.
Unless you create some sort of cool Java applet or custom COM control to help you interface with the printer, you will stuck with Javascript’s Window.print() function.
For those who are stuck without the cool Java applet or the super cool COM control, hopefully this article will help you.
Let’s assume you have the following GridView in your aspx page:
<asp:gridview id="gvCustomersGridView"
datasourceid="CustomersSource"
autogeneratecolumns="true"
emptydatatext="No data available."
allowpaging="true"
runat="server">
</asp>
To make this GridView printable, you need to share the clientID to your Javascript printing function. You could either do it by:
- previewing the page, copy the ID of the table generated and put it into a variable inside Javascript
- Or, you can create a protected variable and put the classic ASP <%= VarName %> inside Javascript
Next, we need to create the print button and the Javascript code to handle the printing.
function Print()
{
var grid_ID = 'gvCustomersGridView'; //assuming that this is the generated ID
var grid_obj = document.getElementById(grid_ID);
if (grid_obj != null)
{
var new_window = window.open('print.html'); //print.html is just a dummy page with no content in it.
new_window.document.write(grid_obj.outerHTML);
new_window.print();
new_window.close();
}
}
You could also comment out the print() and close(), this way user will have a ‘print preview’ and has the chance to set margin, header/footer of the print out.
I hope you find it useful 🙂
About Hardono
Incoming Search
print gridview, gridview print, how to print gridview in asp net
Hi,
Thanks for it.
But how can i specify the paper, font size and other needed formatting?
Unfortunately it’s beyond Javascript’s control. You could try some browser specific ( Internet Explorer ) trick discussed at http://p2p.wrox.com/asp-forms/6474-printing-problem-asp.html
this prints my wole page instead of just the gridview
Hi Collin,
The code is supposed to copy the ‘content’ of your Gridview, then pasted it in a new window. The new window is the one that will be printed.
I think somehow you copy the whole content of the original page, instead of only the ‘outerHTML’ of the Gridview.
ive been loooking all around almost everywhere and im getting desperate but still no answer until i came up with this thread.. thanks alot man! ur a life saver! this really works! once again thank you!
hmmm just a problem though, i followed all the steps, but if i put this code new_window.document.write(grid_obj.outerHTML); i am transferred to print.htm and i see the gridview i want to print but it seems the code new_window.print(); doesnt work.. but if i remove the code new_window.document.write(grid_obj.outerHTML); once again im transferred to print.htm but ofcourse with a blank page.. but the print dialog box would pop up meaning new_window.print(); worked..
This is great! Thanks a lot! it worked for me after making a little change when used with ASP.NET 3.5. What i did to the javascript is :
function Button1_onclick() {
var grid_ID = “ctl00_ContentPlaceHolder1_GridView1”; //assuming that this is the generated ID
var grid_obj = document.getElementById(grid_ID);
if (grid_obj != null) {
var new_window = window.open(‘print.html’); //print.html is just a dummy page with no content in it.
new_window.document.write(msg)
new_window.document.write(grid_obj.outerHTML);
//new_window.print();
//new_window.close();
}
}
how to change the font size of the gridview in the print version ?
you can use CSS to control how the text will look like.
how to call this javascript function