How to achieve Gridview printing with CSS applied?

Home ›

ASP.NET Forums » General ASP.NET » Client Side Web Development » How to achieve Gridview printing with CSS applied?

Shortcuts

Previous Next

How to achieve Gridview printing with CSS applied?

Last post 05-22-2008 6:23 AM by blodfox777. 2 replies.

Sort Posts:

How to achieve Gridview printing with CSS applied?

05-20-2008, 1:43 AM

Contact

835 point Participant
RutuPrash
Member since 01-04-2008, 5:36 AM
India
Posts 282

Hi Friends,

I want to print the gridview. My scenario is that I have a summary page which displays the gridview , some dropdownlist, some textboxes and a HTML print button. Now i have got the code to print only the gridview. that works fine it shows the printer configuration and etc. now my problem is that when i give it to print the gridview doesn't apply stylesheet and i want that stylesheet to be applied as in summary page.

some of them must be knowing this function. Its on all blogs.

function CallPrint(strid)
{
var prtContent = document.getElementById(strid);
var WinPrint = window.open('', '','left=0,top=0,width=1000,height=600,toolbar=1,scrollbars=1,status=0');
WinPrint.document.write(prtContent.outerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}

I have also gave link to printstyle.css but it doesn't affect anything.like this

<link href="tele.css" type="text/css" rel="stylesheet" media="screen" />
<link href="printstyle.css" type="text/css" rel="stylesheet" media="print" />

In printstyle.css file:
@media print
{
    .Body_text
    {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #000000;
        text-decoration: none;
        line-height: 19px;
        word-spacing: 0.5mm;
    }
}

Now what steps should i perform to achieve it. any help is appreciated.

Thanks

Prashant

Re: How to achieve Gridview printing with CSS applied?

05-20-2008, 2:46 AM

Contact

835 point Participant
RutuPrash
Member since 01-04-2008, 5:36 AM
India
Posts 282

Hi frndz,

Shall i post this in another forum of asp.net so as many other geeks can look on to this problem. Its urgent. I know there must be a minor tweak but i m not getting it now.

Thanks

Prashant.

Re: How to achieve Gridview printing with CSS applied?

05-22-2008, 6:23 AM

Contact

Answer

1,092 point Participant
blodfox777
Member since 07-12-2007, 8:30 AM
Posts 159

Hi RutuPrash

there is a way to print gridview: include the gridview into a div, then put the div into a html page, then print the page

there is a demo for you, hope this helps:

<html>
<head>
<script type="text/javascript" language="javascript">
function printPage() {
var newWin = window.open('printer','','');
var titleHTML = document.getElementById("printdiv").innerHTML;
newWin.document.write(titleHTML);
newWin.document.location.reload();
newWin.print();

newWin.close();
}
</script>
</head>
<body>
<div id="printdiv">
 <table class="sontable" cellspacing="0" cellpadding="0" style="width: 13%">
                            <tr>
                                <td style="width: 700px; height: 161px">
                                   <asp:GridView ID="GridData"  runat="server" CellPadding="3" CellSpacing="0"  BorderWidth="1px" BackColor="LightSteelBlue" BorderColor="White" BorderStyle="None" Font-Size="12px" Width="543px" Height="20px"  OnRowDataBound="GridData_RowDataBound">
                                    <RowStyle BackColor="GhostWhite" BorderColor="#006699" />
                                        <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" Wrap="True" />
                                        <HeaderStyle Height="25px" BackColor="#006699" Font-Bold="True" ForeColor="White" HorizontalAlign="Center" CssClass="Freezing"/>
                                </asp:GridView>                                     
                                </td>
                            </tr>
                        </table>
</div>
<a href="javascript:;" onclick="printPage()">打印</a>
</body>
</html>

another way:

Hide the other tags in your page until printing complete

function printer()
{
　　
 beforeprint();
 window.focus();
 window.print()
 afterprint();
}

function beforeprint()
{

 for(i = 0; i < document.all.length; i++)
 {
 
    if ((document.all(i).id.indexOf("div_table_")!=-1) && document.all(i).tagName=="TABLE")

    {
     document.all(i).style.display="none";
    }
 }
}

function afterprint()
{

 for(i = 0; i < document.all.length; i++)
 {
    if ((document.all(i).id.indexOf("div_table_")!=-1) && document.all(i).tagName=="TABLE")
    {
      document.all(i).style.display="block";
    }
 }
}

Regards!

-- "Mark As Answer" If my reply helped you --

Page 1 of 1 (3 items)

RSS Available