Printing GridView Only in ASP.NET

Let's return to the ASP.NET tips and trick series. We are once again going to learn a new trick related to GridView. Previously I posted the following articles related to GridView.

Requirements

Suppose you have a page where you are displaying some data to the user. You want to add functionality to print these records. But the problem with the Browsers Default Print options (Ctrl+P) is that, it will print an entire page. All header images, footers, sidebars and colors will be printed, which is not required. You have two options, either create a new page for a print view and redirect the user to that page or just print the required area, in our case it is the GridView.

Most developers working in a web applications have a MasterPage for their web application. A MasterPage is similar to templates in normal HTML having some advanced functionality and customized code for maintaining an easier and common look of a website or application.

Let's have a look at the following screen to make our requirements more clear.

Code for Default.aspx

This is the code for the GridView.

<asp:GridView runat="server" ID="gvProducts" AutoGenerateColumns="false" AllowPaging="false"
AlternatingRowStyle-BackColor="Linen" HeaderStyle-BackColor="SkyBlue" Width="100%"
OnPageIndexChanging="gvProducts_PageIndexChanging" EmptyDataText="Sorry! No Products to List. First Add from Add Product Link.">
<Columns>
<asp:TemplateField HeaderText="Product ID">
<ItemTemplate>
<asp:Label ID="lblProductID" runat="server" Text='<%#Eval("ProductID")%>' ToolTip="ID of Product as stored in Database."></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<Columns>
<asp:TemplateField HeaderText="Product Name">
<ItemTemplate>
<asp:Label ID="lblProductName" runat="server" ToolTip="Name of Product" Text='<%#Eval("ProductName")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<Columns>
<asp:TemplateField HeaderText="Brand">
<ItemTemplate>
<asp:Label ID="lblBrandName" runat="server" ToolTip="Brand of Product" Text='<%#Eval("BrandName")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<Columns>
<asp:TemplateField HeaderText="Category">
<ItemTemplate>
<asp:Label ID="lblProductCat" runat="server" ToolTip="Category of Product" Text='<%#Eval("CategoryName")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<Columns>
<asp:TemplateField HeaderText="In Stock">
<ItemTemplate>
<asp:Label ID="lblProductinStock" runat="server" ToolTip="Quantity available in Stock"
Text='<%#Eval("UnitsInStock")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

Code for Default.aspx.cs

We do not have much more at the backend, we are just going to bind data to the GridView.

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConToStore"].ConnectionString);
SqlDataAdapter adp = new SqlDataAdapter("Select * from Products,Brands,Category where Products.BrandID=Brands.BrandID and Products.CategoryID=Category.CategoryID", con);
DataSet ds = new DataSet();
adp.Fill(ds);
gvProducts.DataSource = ds.Tables[0];
gvProducts.DataBind();
}
}

Printing the Page

Let's press the Ctrl+P key combination to print the page, before printing see the Preview.

Printing GridView Only

We need to make the following change to print the GridView only. Let's start with the HTML.

Wrap the GridView inside a Table or Panel. I am using a table. Alternatively you can use a Panel.

<table width="70%" id="pnlGridView" runat="server" align="center" class="ContentTable">
<tr>
<td colspan="2" align="center">
<h1>
All Products in Store</h1>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td colspan="2">
<asp:gridview runat="server" id="gvProducts" autogeneratecolumns="false" allowpaging="false"
alternatingrowstyle-backcolor="Linen" headerstyle-backcolor="SkyBlue" width="100%"
onpageindexchanging="gvProducts_PageIndexChanging" emptydatatext="Sorry! No Products to List. First Add from Add Product Link.">
...............
.............
</asp:gridview>
</td>
</tr>
<tr>
<td align="right">
<asp:linkbutton id="lnkPrint" runat="server" tooltip="Click to Print All Records"
text="Print Data" onclick="lnkPrint_Click">
</asp:linkbutton>
<asp:linkbutton id="lnkExportAll" runat="server" tooltip="Export this List" text="Export to Excel"
onclick="lnkExportAll_Click"></asp:linkbutton>
<asp:linkbutton id="lnkAddNew" runat="server" tooltip="Add New Product" text="Add New"
onclick="lnkAddNew_Click"></asp:linkbutton>
</td>
</tr>
</table>

Now just add following JavaScript function in head section and assign that function to Print linkbutton.

<script language="javascript" type="text/javascript">
function PrintPage() {
var printContent = document.getElementById('<%= pnlGridView.ClientID %>');
var printWindow = window.open("All Records", "Print Panel", 'left=50000,top=50000,width=0,height=0');
printWindow.document.write(printContent.innerHTML);
printWindow.document.close();
printWindow.focus();
printWindow.print();
}
</script>

Now let's click on the Print Link button that we created. The following will be the output of the code above.

Bingo! It satisfies the requirements.

I hope you enjoyed reading this. If you have any feedback or suggestions then please send us as comment or use the contact options. Keep sharing.

To read more blogs: P.R's Blog

11 Comments

Join the conversation! Your thoughts help the community grow.

Anil8y ago
In javascript function, what does "All records", "print panel" attributes mean, which you mentioned in window.open()
- John Bhatt8y ago
  Those attributes do nothing in above code. They are just for displaying your code cool. Just refer to window.open() document. First one is URL of page, second is name of window which can be used while returning to the parent page.
Beginner10y ago
Hi john, i have gridview with edit and delete button. but i dont need these buttons on print version..please give me a solution..thanks in advance
Elayarajan11y ago
Thanks.......
- John Bhatt10y ago
  Thank you Elayarajan.
Santhakumar Munuswamy11y ago
Welcome
Santhakumar Munuswamy11y ago
Good Start
M SK12y ago
This article helped me thanks :)
- John Bhatt12y ago
  Glad to know. Thanks for reading.
Abhay Shanker12y ago
Ver nice step by ste explanation.also very helpful.
- John Bhatt12y ago
  Thank you Abhay. Glad to know my posts help you somehow.