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

最新推荐文章于 2024-11-16 14:11:26 发布

FrankWin

最新推荐文章于 2024-11-16 14:11:26 发布

阅读量807

点赞数

分类专栏： Developer 文章标签： datagrid printing header include each javascript

Developer 专栏收录该内容

71 篇文章 0 订阅

订阅专栏

http://www.codeproject.com/dotnet/HeaderOnEachPage.asp

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:

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.

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.

<body οnlοad="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.