How can I print a full gridview area via a custom print window?


Tags: c#,javascript,asp.net,css,gridview

Problem :

I'm in the process of creating a custom GridView data Print window that is designed to just print out the gridview area. One button will print out the grid view for the current window and the other button for all the records in the GridView. As the code stands now, when the button is clicked (Printing the current page and all of the records respectively) the preview window shows all the records in the GridView perfectly (23 columns including two command fields on either side of the GridView). However, when the job is printed out the grid view is chopped (only shows about half of the grid) no matter what printer or CSS/Formatting settings I tweak.

The two challenges I'm encountering is that 1) I am unable to print the full gridview in portrait or landscape and 2) my javascript is pretty weak. How can I tweak the following code so that when the gridview prints, the FULL grid is printed?

If more information is needed, please do not hesitate to ask.

Here is the code I have behind my aspx file for the print buttons.

protected void PrintCurrentPage_Click(object sender, EventArgs e)
{
GridView1.PagerSettings.Visible = false;
GridView1.DataBind();
StringWriter sw = new StringWriter();
HtmlTextWriter hw = new HtmlTextWriter(sw);
GridView1.RenderControl(hw);
string gridHTML = sw.ToString().Replace("\"", "'")
.Replace(System.Environment.NewLine, "");
StringBuilder sb = new StringBuilder();
sb.Append("<script type = 'text/javascript'>");
sb.Append("window.onload = new function(){");
sb.Append("var printWin = window.open('', '', 'left=0");
sb.Append(",top=0,width=3000,height=600,status=0');");
sb.Append("printWin.document.write(\"");
sb.Append(gridHTML);
sb.Append("\");");
sb.Append("printWin.document.close();");
sb.Append("printWin.focus();");
sb.Append("printWin.print();");
sb.Append("printWin.close();};");
sb.Append("</script>");
ClientScript.RegisterStartupScript(this.GetType(), "GridPrint", sb.ToString());
GridView1.PagerSettings.Visible = true;
GridView1.DataBind();

}

And here is the code for printing all the records.

protected void PrintAll_Click(object sender, EventArgs e)
{
GridView1.AllowPaging = false;
GridView1.DataBind();
StringWriter sw = new StringWriter();
HtmlTextWriter hw = new HtmlTextWriter(sw);
GridView1.RenderControl(hw);
string gridHTML = sw.ToString().Replace("\"", "'")
    .Replace(System.Environment.NewLine, "");
StringBuilder sb = new StringBuilder();
sb.Append("<script type = 'text/javascript'>");
sb.Append("window.onload = new function(){");
sb.Append("var printWin = window.open('', '', 'left=0");
sb.Append(",top=0,width=3000,height=600,status=0');");
sb.Append("printWin.document.write(\"");
sb.Append(gridHTML);
sb.Append("\");");
sb.Append("printWin.document.close();");
sb.Append("printWin.focus();");
sb.Append("printWin.print();");
sb.Append("printWin.close();};");
sb.Append("</script>");
ClientScript.RegisterStartupScript(this.GetType(), "GridPrint", sb.ToString());
GridView1.AllowPaging = true;
GridView1.DataBind();


}


Solution :

If the grid is that big in width, there is nothing, by default that you can do to print it all in the same page...

But, that's not bad news, in fact, there are several articles that help you choose and show the same grid in different ways upon the user print it.

The best way I see would be to show more information in one column, group them into something else and that is relevant to the user, and try it out...

This is just an example, and I have no idea what are you printing, but, instead of having all fields for a customer in one line, group them as:

Customer                  | Sales Responsible        | ...
------------------------------------------------------------------
Bruno Alexandre           | Techie Joe               | ...
My Street not yours, 56   | 43 sales this month      | ...
DK-1400 København         | 450.000€ per sale (avg)  | ...

and then you can decorate that table with a class of table-print where:

<style>
@media screen
{
  table-print {display:none;}
}
@media print
{
  table-print {display:block;}
}
@media screen,print
{
  ...
}
</style>

after that, read how to deal with page breaks:

How to deal with page breaks when printing a large HTML table

There is even the Printliminator to help users disable what they don't want to print...


    CSS Howto..

    HTML And CSS and Javascript: How to make a onclick even remove text in input text fields

    How can I disable the color defined in an previously defined CSS class

    UI Challenge - how to draw “connectors” between elements?

    How to use @Media queries

    How to stop CSS element style from getting into my class style?

    Changing my web-font in css caused a my old font-size values defined in “em” to be inaccurate. How to fix it?

    How can I style flexbox children in a multiline

    How can I target a block after another block with css?

    How can I correctly type css float?

    How can CSS have a significantly negative effect on page paint time in a specific area of a web page?

    How to achieve table's centering capabilities without tables

    How to change a class CSS with a Greasemonkey script?

    How to set style of active page number in ASP.NET GridView Pager?

    How to check the visibility property with javascript

    How to move links in the middle of the Web page using html/css?

    How to style five rows with alternating fixed/variable width?

    hide and show Div on click

    CSS flipping animation in IE: Turned side shows mirror content

    How do I vertically center text and have the dark blue bar go across the entire screen

    how to change attribute of table cell based on contents when table rows created by while loop with PHP

    How to make an element match the height of a dynamic page

    How to select nested UL element without class in JavaScript

    How to apply CSS width to a submit input on Firefox?

    How to force Jade not to indent block tag?

    CSS - how to apply styles to first elements in a static generated list

    How to automatically resize a box to fit content — with jQuery Mobile

    How can I get as much of the text into a DIV row as possible?

    CSS how translate DIV with whole content in it

    How to hide Fileupload with simple span by using css

    How to send web page in email body with css