How to print gridview with scrolling?

Question

I am making a gridview which uses scrolling as the column are a more than the page width of my webpage . The issue is when i want to print it only prints the shown data. How can i print everything in a div or panel ?

MY CODE FOR GRIDVIEW:

<a href="#" onclick="printPartOfPage('content-middle')" >PRINT ME </a>

<asp:Panel ID="gridPanel" runat="server" Height="500px" Width="980px" ScrollBars="Auto">


   <asp:GridView EnableSortingAndPagingCallbacks="true" Width="450px" 
            OnRowCreated="GridView1_RowCreated" runat="server" ID="GridView2" 
          CellPadding="4" ForeColor="#333333" GridLines="None" 
            >

                 <AlternatingRowStyle BackColor="White" ForeColor="#284775" />

                 <Columns>

                     <asp:HyperLinkField DataNavigateUrlFields="ID" 
                         DataNavigateUrlFormatString="updateAppointmentOperations.aspx?showID={0}" Text="Update " 
                         Target="_blank" />
                 </Columns>

                 <EditRowStyle BackColor="#999999" />
                 <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                 <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                 <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                 <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                 <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                 <SortedAscendingCellStyle BackColor="#E9E7E2" />
                 <SortedAscendingHeaderStyle BackColor="#506C8C" />
                 <SortedDescendingCellStyle BackColor="#FFFDF8" />
                 <SortedDescendingHeaderStyle BackColor="#6F8DAE" />

             </asp:GridView>

    </asp:Panel>

And the javascript print i got of the internet and it is:

<script type="text/javascript">

function printPartOfPage(elementId) {
    var printContent = document.getElementById(elementId);
    var windowUrl = 'about:blank';
    var uniqueName = new Date();
    var windowName = 'Print' + uniqueName.getTime();
    var printWindow = window.open(windowUrl, windowName, 'left=50000,top=50000,width=0,height=0');

    printWindow.document.write('<link rel="stylesheet" type="text/css" href="style/additional.css" /><link rel="stylesheet" type="text/css" href="style/default.css" /><link rel="stylesheet" type="text/css" href="style/hi-res.css" />' + printContent.innerHTML);
    printWindow.document.close();
    printWindow.focus();
    printWindow.print();
    printWindow.close();
}

The gridview is in a div with id content middle.

Thank you

Answer 1

You can include another GridView on the page, which will only be used for printing.

The way to toggle which one is shown is to decorate the two with CSS classes, as appropriate.

For example:

<style>
@media print {
    .PrintOnly { display:block; }
    .ScreenOnly { display:none; }
  }
  @media screen {
    .PrintOnly { display:none; }
    .ScreenOnly { display:block; }
  }
</style>

Answer 2

There are several ways to do this. Probably the most user-friendly is to use css to set different styles for display and printing using the @media directive. Instead of setting the height and width properties of dridPanel, use css to set the height and width - 500 and 980 when the media is "screen" and just set the width to 100% when the media is print. (Let the hdieght just be, and it should show it all)

More info on the @media css directive can be found here: http://www.w3schools.com/CSS/css_mediatypes.asp

There's a nice article on using css to make your pages printer-friendly here: http://www.envisionic.com/webtips/user_experience/printer_friendly.php

Answer 3

Okay - it is possible but I really would dissuade you from doing it. Take advantage of Crystal Reports or anything else. There are even a couple of open source reporting solutions that use RDL.

What you can do in 30 minutes in Crystal takes much longer with this. I did an obscene amount of research to see if it was possible. MSDN has an article that works

http://msdn.microsoft.com/en-us/library/aa479018.aspx

It steps in and defines an alternative to the system.web.ui.page and I gotta admit that it does a very good job. I had to do a small tweak because users wanted a page row counter.

Again I can testify that it works - does paging, column headers, control breaks, can total columns. If you want to control your margins then consider MEADCO (i think) javascript library. Also, it includes logic so that the user can page thru as well but I couldnt get it to work. But considering how I only have 3 months ASP experience - probably an easy fix.

You are welcome to my VS 2010 DLL solution. Let me know if I can help.