Click here to Skip to main content
13,739,048 members
Click here to Skip to main content
Add your own
alternative version


60 bookmarked
Posted 1 Aug 2006

How to include a header on each page when printing a DataGrid

, 1 Aug 2006
Rate this:
Please Sign up or sign in to vote.
An article on printing issues of DataGrid
<!-- -->

No header on second page

Header is there on second page


In many situations we might use a DataGrid for reporting purposes. If the report contains many pages we will face the problem of the header only appearing on the first page, and not printing on all pages. With a little JavaScript and CSS we can easily solve this issue.

Using the code

A DataGrid will be rendered as a table element.

If you apply the following CSS rule to THEAD elements:

  display : table-header-group;

then everything in a THEAD tag will be printed on every page. However, the DataGrid will not render a THEAD. So the above style will not work. We can add a THEAD to the table(rendered by the DataGrid) with the following JavaScript code.

function AddTHEAD(tableName)
   var table = document.getElementById(tableName); 
   if(table != null) 
    var head = document.createElement("THEAD"); = "table-header-group";
    table.insertBefore(head, table.childNodes[0]); 

The parameter ‘tableName’ is the ID of the datagrid. Calling this function from Onload will work.

<body onload="javascript: AddTHEAD('DataGrid')">

The function create a THEAD tag and add the first row of the table (header) to it. If the header consists of more than one row you need to add the necessary rows to the created THEAD.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Abhilash Nedumpurath
United States United States
I have 3 years of IT experience.
Doing : C#, ASP.NET,VB,SQL Server, Oracle

Currently working in Technopark, Kerala,India

You may also be interested in...


Comments and Discussions

GeneralThank you! Pin
shravaniraj29-Jun-09 2:51
membershravaniraj29-Jun-09 2:51 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04-2016 | 2.8.180920.1 | Last Updated 1 Aug 2006
Article Copyright 2006 by Abhilash Nedumpurath
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid