Home Asp.net How to Print GridView Data in Asp .Net on Button Click using...

How to Print GridView Data in Asp .Net on Button Click using Javascript?

5
5

Here I will explain How to Print GridView Data in Asp .Net. In my previous tutorials, I’d explained how to send gridview in email body, difference between String and string, check or uncheck all checkboxes in gridview, and other more cracking tutorials on GridView, Asp.net, JavaScript, jQuery here.

Now here in this tutorial, How to Print GridView Data in Asp .Net when clicking on a print button from code-behind using c# or vb.net and from client-side using javascript or jquery in asp.net.

How to Print Gridview Data in Asp .Net Using Javascript – [JavaScript]

Following is the JavaScript function that is used to print asp.net gridview:

<script type=”text/javascript”>
function printGrid() {
var gridData = document.getElementById(<%= grdResultDetails.ClientID %>);
var windowUrl = ‘about:blank’;//set print document name for gridview
var uniqueName = new Date();
var windowName = ‘Print_’ + uniqueName.getTime();var prtWindow = window.open(windowUrl, windowName,
‘left=100,top=100,right=100,bottom=100,width=700,height=500’);
prtWindow.document.write(‘<html><head></head>’);
prtWindow.document.write(‘<body style=”background:none !important”>’);
prtWindow.document.write(gridData.outerHTML);
prtWindow.document.write(‘</body></html>’);
prtWindow.document.close();
prtWindow.focus();
prtWindow.print();
prtWindow.close();
}
</script>

To call the above function on button click, add OnClientClick=”printGrid()” client-side event as shown below:

<asp:Button ID=”btnPrint” runat=”server” Text=”Print From Client-side” OnClientClick=”printGrid()” />

To call the above function on button click, add OnClick=”btnPrintFromCodeBehind_Click” server-side event as shown below:

<asp:Button ID=”btnPrintFromCodeBehind” runat=”server” Text=”Print From Code-behind”
OnClick=”btnPrintFromCodeBehind_Click” />

HTML Markup – [.aspx]

Following is the complete HTML markup for your .aspx page:

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head id=”Head1″ runat=”server”>
<title>Print asp.net gridview data using javascript</title>
<script type=”text/javascript”>
function printGrid() {
var gridData = document.getElementById(<%= grdResultDetails.ClientID %>);
var windowUrl = ‘about:blank’;//set print document name for gridview
var uniqueName = new Date();
var windowName = ‘Print_’ + uniqueName.getTime();var prtWindow = window.open(windowUrl, windowName,
‘left=100,top=100,right=100,bottom=100,width=700,height=500’);
prtWindow.document.write(‘<html><head></head>’);
prtWindow.document.write(‘<body style=”background:none !important”>’);
prtWindow.document.write(gridData.outerHTML);
prtWindow.document.write(‘</body></html>’);
prtWindow.document.close();
prtWindow.focus();
prtWindow.print();
prtWindow.close();
}
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<table>
<tr>
<td><h4>Print asp.net gridview data in asp.net c#, vb.net</h4></td>
</tr>
<tr>
<td>
<asp:Button ID=”btnPrint” runat=”server” Text=”Print From Client-side”
OnClientClick=”printGrid()” />&nbsp;&nbsp;
<asp:Button ID=”btnPrintFromCodeBehind” runat=”server”
Text=”Print From Code-behind” OnClick=”btnPrintFromCodeBehind_Click” />
</td>
</tr>
<tr><td>&nbsp;&nbsp;</td></tr>
<tr>
<td>
<asp:GridView ID=”grdResultDetails” runat=”server” AutoGenerateColumns=”false”>
<HeaderStyle Font-Bold=”true” BackColor=”#ff6600″ BorderColor=”#222″
ForeColor=”White” Height=”30″ />
<Columns>
<asp:BoundField DataField=”Subjects” HeaderText=”Subjects” ItemStyle-Width=”150″
ItemStyle-HorizontalAlign=”Center” />
<asp:BoundField DataField=”Marks” HeaderText=”Marks” ItemStyle-Width=”150″
ItemStyle-HorizontalAlign=”Center” />
<asp:BoundField DataField=”Grade” HeaderText=”Grade” ItemStyle-Width=”150″
ItemStyle-HorizontalAlign=”Center” />
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

How to Print DataGridview in c# [ Code-behind – C#]

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
LoadGridData();
}
}private void LoadGridData()
{
try
{
System.Data.DataTable dtSubData = new System.Data.DataTable();//Creating grid columns
dtSubData.Columns.Add(“Subjects”);
dtSubData.Columns.Add(“Marks”);
dtSubData.Columns.Add(“Grade”);

//Adding row deails
dtSubData.Rows.Add(“Asp.net”, “70”, “B+”);
dtSubData.Rows.Add(“C#”, “80”, “A”);
dtSubData.Rows.Add(“Vb.net”, “76”, “A”);
dtSubData.Rows.Add(“HTML”, “91”, “A+”);
dtSubData.Rows.Add(“CSS”, “95”, “A+”);
dtSubData.Rows.Add(“JavaScript”, “78”, “A”);
dtSubData.Rows.Add(“jQuery”, “74”, “A”);

//Binding details to gridview
grdResultDetails.DataSource = dtSubData;
grdResultDetails.DataBind();
}
catch { }
}

protected void btnPrintFromCodeBehind_Click(object sender, EventArgs e)
{
try
{
ScriptManager.RegisterStartupScript(this, typeof(Page), “printGrid”, “printGrid();”, true);
}
catch { }
}

How to Print Datagridview in Vb .Net [Code-behind – Vb.Net]

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
LoadGridData()
End If
End SubPrivate Sub LoadGridData()
Try
Dim dtSubData As New System.Data.DataTable()‘Creating grid columns
dtSubData.Columns.Add(“Subjects”)
dtSubData.Columns.Add(“Marks”)
dtSubData.Columns.Add(“Grade”)

‘Adding row deails
dtSubData.Rows.Add(“Asp.net”, “70”, “B+”)
dtSubData.Rows.Add(“C#”, “80”, “A”)
dtSubData.Rows.Add(“Vb.net”, “76”, “A”)
dtSubData.Rows.Add(“HTML”, “91”, “A+”)
dtSubData.Rows.Add(“CSS”, “95”, “A+”)
dtSubData.Rows.Add(“JavaScript”, “78”, “A”)
dtSubData.Rows.Add(“jQuery”, “74”, “A”)

‘Binding details to gridview
grdResultDetails.DataSource = dtSubData
grdResultDetails.DataBind()
Catch
End Try
End Sub

Protected Sub btnPrintFromCodeBehind_Click(ByVal sender As Object, ByVal e As EventArgs)
Try
ScriptManager.RegisterStartupScript(Me, GetType(Page), “printGrid”, “printGrid();”, True)
Catch
End Try
End Sub

Example Result

How to Print GridView Data in Asp .Net

Download Example

[wpdm_package id=’5428′]

5 COMMENTS

  1. Hi, all your article are pretty interesting now i got a question, dont u have a snipet code of how to print a form into PDF exactly the way it looks in html??
    Thanks in advance

  2. Mayank, I tried your code for print gridView but I got a problem with paging. My grid view using paging, which makes the content displayed in multiple pages. Your codes only print first page. Any solution to print all?
    Thanks.

LEAVE A REPLY

Please enter your comment!
Please enter your name here
Captcha verification failed!
CAPTCHA user score failed. Please contact us!