Click here to Skip to main content
15,867,771 members
Articles / Programming Languages / Javascript
Article

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

Rate me:
Please Sign up or sign in to vote.
4.07/5 (16 votes)
1 Aug 2006 112K   878   60   16
An article on printing issues of DataGrid

No header on second page

Header is there on second page

Introduction

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:

CSS
tHead
{
  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.

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

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

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

License

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


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

Comments and Discussions

 
QuestionCan We have record numbers on the header or any place on page print preview. Like 1-25, 25-30 for 30 records Pin
rohit kakria7-Apr-13 22:36
rohit kakria7-Apr-13 22:36 
GeneralMy vote of 5 Pin
prasan kumar19-Oct-12 0:20
prasan kumar19-Oct-12 0:20 
QuestionVery Good... Help me a lot.. Pin
sibiraj91727-Jun-12 0:57
sibiraj91727-Jun-12 0:57 
GeneralMy vote of 1 Pin
Mohammed Al-Kharouf7-Mar-10 13:29
Mohammed Al-Kharouf7-Mar-10 13:29 
GeneralThank you! Pin
shravaniraj29-Jun-09 2:51
shravaniraj29-Jun-09 2:51 
GeneralDatagrid and Heading printing Pin
prabodh1126-Aug-08 20:45
prabodh1126-Aug-08 20:45 
Dear sir,
I am using master page in a .aspx page .So there is no Body tag on the form.So please tell me where do i pass the Datagrid id

onload="javascript: AddTHEAD('Datagrid1')"
Thanks and Regards
Prabodh Bansal
GeneralThanks Pin
khamis26-Jul-08 5:41
khamis26-Jul-08 5:41 
Questionunable to get the upper line of the header on the second page onwards Pin
Member 188282127-May-08 3:23
Member 188282127-May-08 3:23 
GeneralSimple way to do that Pin
samir4118027-Sep-07 23:59
samir4118027-Sep-07 23:59 
GeneralRe: Simple way to do that Pin
shravaniraj29-Jun-09 2:41
shravaniraj29-Jun-09 2:41 
Generalthanks Pin
chathuraka19-Aug-07 19:15
chathuraka19-Aug-07 19:15 
GeneralRe: thanks Pin
Abhilash Nedumpurath21-Aug-07 1:11
Abhilash Nedumpurath21-Aug-07 1:11 
Questioni am not getting the uper line of the header on page second onwards? Pin
vsuneeldot17-Jan-07 20:00
vsuneeldot17-Jan-07 20:00 
AnswerRe: i am not getting the uper line of the header on page second onwards? Pin
Mahendiran28-Aug-07 2:49
Mahendiran28-Aug-07 2:49 
Generalty so much Pin
John Secada14-Sep-06 9:29
John Secada14-Sep-06 9:29 
GeneralRe: ty so much Pin
Abhilash Nedumpurath21-Aug-07 1:11
Abhilash Nedumpurath21-Aug-07 1:11 

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.