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, I’ll explain how you can print asp.net gridview with its data when clicking on print button from code-behind using c# or vb.net and from client-side using javascript or jquery in asp.net.
Function to Print Asp.net Gridview – [JavaScript]
Following is the JavaScript function that is used to print asp.net gridview:
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:
To call the above function on button click, add OnClick=”btnPrintFromCodeBehind_Click” server-side event as shown below:
OnClick="btnPrintFromCodeBehind_Click" />
HTML Markup – [.aspx]
Following is the complete HTML markup for your .aspx page:
<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()" />
<asp:Button ID="btnPrintFromCodeBehind" runat="server"
Text="Print From Code-behind" OnClick="btnPrintFromCodeBehind_Click" />
</td>
</tr>
<tr><td> </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>
Code-behind – [C#]
{
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 { }
}
Code-behind – [Vb.net]
If Not IsPostBack Then
LoadGridData()
End If
End Sub
Private 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
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.
This works for single page only without paging. If you want to print all data, you should first do an AJAX call that will make paging false to target GridView, then continue exporting process. If you want this functionality from server side, follow this https://www.aspneto.com/export-gridview-data-to-word-excel-text-pdf-file-asp-net-c-vb.html tutorial.
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
Hi Jairo,
Thanks. Can you elaborate which form you are talking about?