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..

    How do I stop and change a CSS keyframe in Javascript?

    How to capture hover events on css (less) box-shadow

    how to use variables when setting CSS properties in Jquery?

    How can I make height: “100%” work cross browser in CSS?

    How can I improve this mobile site? [closed]

    How an mobile compatible website handles the performance?

    Safari displays font differently from other browsers -Set specific font-family for specific browser - How to change font smoothing for Safari [closed]

    How to change color of the selected item from a Xul listbox?

    How to delete only the selected message inside a #Chat using jquery?

    How do I spread out this navbar along with making the links exclusive to the button itself?

    How to stop DIVS from colliding when page resized (footer)?

    How to create and apply CSS to javascript Alert

    how to remove the border from the last list item and select :nth-child (multiple items)

    CSS how to fill height of container?

    CSS Grow on hover adds padding to the bottom of an image, how do I stop this from happening?

    how to remove all spaces from a file

    How to get @media to take precedence over normal styling

    How can I insert text before an item with CSS?

    CSS page headers - how to use print margins?

    How to externally style with CSS the specific 3 td tags on the html table generated by the pager row of a asp.net gridview control

    How should I create a web interface for my application? [closed]

    How do I apply CSS Transition to my responsive menu?

    How to add text to a CSS Sprite

    How to remove “padding” from ionic card

    How are scrollbars in new Google Docs UI styled (esp. the arrow buttons)?

    How to make Chrome and IE display block hyperlinks correctly

    How to set the style of the message in an SWT Text field?

    CSS Specificity - How does “it” decide which styles to apply?

    CSS: how to apply margin to a container with floats?

    How do I remove the last border on my nav bar?