Table Header and Page Breaks with Print Media Query

[Jonathan]

    I am using CSS print media query to modify page layout when printing and I am unable to set the following. All other styles are working properly.

@media print{
    thead{display:table-header-group;}
    tr{page-break-inside:avoid;}
}

The following post is quite old, but should still work, however it doesn't. All I see where I expect to see the header on each page is a small black border box just under the first column header on each page as seen in the attached files.

http://www.telerik.com/support/code-library/printing-grid-headers-on-every-page

Page breaks also aren't working to prevent rows from being cutoff. The grid spans multiple pages and rows should not be cutoff between pages.

Any suggestions are greatly appreciated.

 

 

[Kostadin]

Hi Jonathan,

The code library that you are using demonstrates how to apply a style to the header but since its using the browser built-in functionality it might differs across the browsers. What I can suggest you is to use the grid built-in Export to PDF feature. Please check out the following live example which demonstrates how to implement header and footers. Also you can examine the documentation where more detailed information is provided and also describe how to place a page breaks.

Regards,
Kostadin
Telerik

[Jonathan]

I can't use Export to PDF because the grid isn't the only thing that's being printed. There is an entire page of content and the grid is just a part of it.

I'm also not sure if the page-break example helps me because I'm using a bound grid and I'm not sure how I would be able to tell it where to break on a row. Is there an example that shows how to use page breaks on bounds grid? I need to prevent page breaks from occurring in the middle of a row so they don't get cut off. The page break should only occur before or after a row to prevent the cut-off text. Using the css from the original post I can easily create a table with any number of rows where the header prints on every page and the page breaks are not in the middle of the text in a row and I don't have any issue across browsers. 

[Kostadin]

Hi Jonathan,

Note that the print option is done by the browser itself and there isn't an option to control it. For this purpose I recommend you to use the built-in functionality of the grid. Keep in mind that the page break could be included on each cell where you need to break the page. Please check out the attached sample which demonstrates how to break the page after the 4-th row.

Regards,
Kostadin
Telerik