jQuery & JavaScript

Print an ASP.NET GridView on a button click with JavaScript

jQuery & JavaScript · By the Postback Notes editorial team · Published 2026-08-29

Users want a "Print" button that prints the table, not the menu, the filters and the footer. The modern answer is a print stylesheet plus window.print(); the browser does the rest, including repeating the header row on every printed page.

The button

<div class="report">
    <h2>Open orders</h2>
    <asp:GridView ID="gvOrders" runat="server" CssClass="grid" UseAccessibleHeader="true" />
</div>
<button type="button" class="no-print" onclick="window.print()">Print</button>

UseAccessibleHeader="true" renders the header cells as <th> in a <thead> (when combined with the line below), which helps screen readers and printing.

protected void Page_PreRender(object sender, EventArgs e)
{
    if (gvOrders.HeaderRow != null)
        gvOrders.HeaderRow.TableSection = TableRowSection.TableHeader; // emits <thead>
}

The print stylesheet

@media print {
  header.site, nav, footer.site, .no-print, .filters { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .report { margin: 0; }
  .grid { width: 100%; border-collapse: collapse; }
  .grid th, .grid td { border: 1px solid #999; padding: 3pt 5pt; }
  .grid thead { display: table-header-group; }   /* repeat the header on each page */
  .grid tr { break-inside: avoid; }              /* do not split a row across pages */
  a[href]::after { content: ""; }                /* no URLs after links */
}

Everything not needed on paper is hidden; the table gets plain borders that survive black-and-white printing. Browsers repeat <thead> rows at the top of each printed page.

Printing every page of a paged grid

A paged GridView only contains the current page. To print everything, rebind without paging on a postback and print when the page reloads:

protected void btnPrintAll_Click(object sender, EventArgs e)
{
    gvOrders.AllowPaging = false;
    BindGrid();
    ClientScript.RegisterStartupScript(GetType(), "print", "window.print();", true);
}

On the next postback paging is back, because AllowPaging is only changed for this response. For very large grids, a PDF export is kinder to the browser: see Export GridView data.

The popup technique

Older tutorials copy the grid's HTML into a new window and print that:

function printGrid() {
  var html = document.getElementById("<%= gvOrders.ClientID %>").outerHTML;
  var w = window.open("", "_blank", "width=900,height=700");
  w.document.write("<!doctype html><title>Orders</title><link rel=stylesheet href='/print.css'>" + html);
  w.document.close();
  w.onload = function () { w.focus(); w.print(); w.close(); };
}

It works but popup blockers may interfere, styles must be loaded again, and document.write is discouraged. The print stylesheet approach is simpler and also applies when users press Ctrl+P.

Common problems

Official documentation