Printing Single Page GridView with Preview

Tweet

This post is a continuation of a series. Please look at the end of this post for more information

This post talks about how to show print preview of a Gridview contents to print in the printer. Here I am taking an example of printing single page of GridView which currently showing on the page. So, mostly this example can be used for printing single page GridView. If the GridView has more than one page, please look at the next posts (posting soon) on this series.

The implementation goes as below:

The XML File - (Here I am taking data from Northwind database

<?xml version="1.0" encoding="UTF-8" ?>
<Products>
  <Product ProductID = "1" ProductName = "Chai" SupplierName = "Exotic Liquids" CategoryName = "Beverages" QuantityPerUnit = "10 boxes x 20 bags" UnitPrice = "18.00" UnitsInStock = "18.00" UnitsOnOrder = "18.00" ReorderLevel = "18.00" Discontinued = "No" />
  <Product ProductID = "2" ProductName = "Chang" SupplierName = "Exotic Liquids" CategoryName = "Beverages" QuantityPerUnit = "24 - 12 oz bottles" UnitPrice = "19.00" UnitsInStock = "19.00" UnitsOnOrder = "19.00" ReorderLevel = "19.00" Discontinued = "No" />
  <Product ProductID = "3" ProductName = "Aniseed Syrup" SupplierName = "Exotic Liquids" CategoryName = "Condiments" QuantityPerUnit = "12 - 550 ml bottles" UnitPrice = "10.00" UnitsInStock = "10.00" UnitsOnOrder = "10.00" ReorderLevel = "10.00" Discontinued = "No" />
  <Product ProductID = "4" ProductName = "Chef Anton's Cajun Seasoning" SupplierName = "New Orleans Cajun Delights" CategoryName = "Condiments" QuantityPerUnit = "48 - 6 oz jars" UnitPrice = "22.00" UnitsInStock = "22.00" UnitsOnOrder = "22.00" ReorderLevel = "22.00" Discontinued = "No" />
  <Product ProductID = "5" ProductName = "Chef Anton's Gumbo Mix" SupplierName = "New Orleans Cajun Delights" CategoryName = "Condiments" QuantityPerUnit = "36 boxes" UnitPrice = "21.35" UnitsInStock = "21.35" UnitsOnOrder = "21.35" ReorderLevel = "21.35" Discontinued = "Yes" />
  <Product ProductID = "6" ProductName = "Grandma's Boysenberry Spread" SupplierName = "Grandma Kelly's Homestead" CategoryName = "Condiments" QuantityPerUnit = "12 - 8 oz jars" UnitPrice = "25.00" UnitsInStock = "25.00" UnitsOnOrder = "25.00" ReorderLevel = "25.00" Discontinued = "Yes" />
  <Product ProductID = "7" ProductName = "Uncle Bob's Organic Dried Pears" SupplierName = "Grandma Kelly's Homestead" CategoryName = "Produce" QuantityPerUnit = "12 - 1 lb pkgs." UnitPrice = "30.00" UnitsInStock = "30.00" UnitsOnOrder = "30.00" ReorderLevel = "30.00" Discontinued = "No" />
  <Product ProductID = "8" ProductName = "Northwoods Cranberry Sauce" SupplierName = "Grandma Kelly's Homestead" CategoryName = "Condiments" QuantityPerUnit = "12 - 12 oz jars" UnitPrice = "40.00" UnitsInStock = "40.00" UnitsOnOrder = "40.00" ReorderLevel = "40.00" Discontinued = "No" />
  <Product ProductID = "9" ProductName = "Mishi Kobe Niku" SupplierName = "Tokyo Traders" CategoryName = "Meat/Poultry" QuantityPerUnit = "18 - 500 g pkgs." UnitPrice = "97.00" UnitsInStock = "97.00" UnitsOnOrder = "97.00" ReorderLevel = "97.00" Discontinued = "Yes" />
  <Product ProductID = "10" ProductName = "Ikura" SupplierName = "Tokyo Traders" CategoryName = "Seafood" QuantityPerUnit = "12 - 200 ml jars" UnitPrice = "31.00" UnitsInStock = "31.00" UnitsOnOrder = "31.00" ReorderLevel = "31.00" Discontinued = "No" />
</Products>

aspx script

<div style="padding:15px;">
    <div id="GridViewContainer">
        <asp:GridView ID="grdViewProducts" runat="server"
            AllowPaging="True" AutoGenerateColumns="False" TabIndex="1"
            DataKeyNames="ProductID" Width="100%" DataSourceID="XmlDataSource1" 
            ShowFooter="True" CellPadding="4" ForeColor="#333333" GridLines="None">
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <Columns>
                <asp:BoundField DataField="ProductID" HeaderText="Product ID" />
                <asp:BoundField DataField="ProductName" HeaderText="Product Name" />
                <asp:BoundField DataField="SupplierName" HeaderText="Supplier" />
                <asp:BoundField DataField="CategoryName" HeaderText="Category" />
                <asp:BoundField DataField="QuantityPerUnit" HeaderText="Quantity Per Unit"/>
                <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" />
            </Columns>
            
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#999999" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
            
        </asp:GridView>
    </div>
    <input id="btnPrint" onclick="PrintGridView()" type="button" value="Print" />
    <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="Data/Products.xml"></asp:XmlDataSource>
</div>

Javascript

function PrintGridView() {
   printWindow = window.open("", "mywindow", "location=0,status=0,scrollbars=1,resizable=1");

   var strContent = "<html><head>";
   strContent = strContent + "<title" + ">Print Preview</title>";
   strContent = strContent + "<link href=\"App_Themes/Default/Default.css\" type=\"text/css\" rel=\"stylesheet\" />";
   strContent = strContent + "</head><body>";
   strContent = strContent + "<div style='width:100%;text-align:right;'>";
   strContent = strContent + "<input type='button' id='btnPrint' value='Print' style='width:100px' onclick='window.print()' />";
   strContent = strContent + "<input type='button' id='btnCancel' value='Cancel' style='width:100px' onclick='window.close()' />";
   strContent = strContent + "</div>";

   // Writing GridView Contents
   strContent = strContent + "<div style='width:100%;'>";
   strContent = strContent + document.getElementById('GridViewContainer').innerHTML;
   strContent = strContent + "</div>";

   strContent = strContent + "</body>";
   printWindow.document.write(strContent);
   printWindow.document.close();
   printWindow.focus();
}

As you see in this example, there is a DIV element (GridViewContainer) declared in the aspx page which act as a container for the GridView. When creating Preview, just get the innerHTML of the DIV element and write into the popup window.

The output of the code:

GridView in Normal Page

GridView in Print Preview

download the source code here

The other links on How to print Web Page Using Javascript:

1. Web page printing using Javascript
2. How to show Preview before Printing a Page using Javascript
3. Appling style for the Print Preview using Javascript
4. Removing unnecessary contents from the Normal page when Preview for Print
5. Using window.onafterprint(), window.onbeforeprint() Javascript functions (IE Only)
6. How to print Content Page Information from Master Page using Javascript
7. Printing different parts of page using Javascript when Master Page, User Controls used
8. Printing Single Page GridView with Preview
9. Printing Multi Page GridView with Preview - 1
10. Printing Multi Page GridView with Preview - 2
11. Adding & Removing GridView columns in the Print Preview using JavaScript