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?

105
5
How to Print GridView Data in Asp .Net
How to Print GridView Data in Asp .Net

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 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

How to Print GridView Data in Asp .Net
How to Print GridView Data in Asp .Net

Download Example

Previous articleWhat is the difference between String and string in Asp.net C#?
Next articleWhat is the difference between String and StringBuilder in Asp.net C# Vb.net?
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

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

12 − 6 =