This is a migrated thread and some comments may be shown as answers.

Table Header and Page Breaks with Print Media Query

3 Answers 87 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jonathan
Top achievements
Rank 1
Jonathan asked on 02 Sep 2015, 12:48 AM

    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.

 

 

3 Answers, 1 is accepted

Sort by
0
Kostadin
Telerik team
answered on 04 Sep 2015, 10:53 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Jonathan
Top achievements
Rank 1
answered on 04 Sep 2015, 06:35 PM

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. 

0
Kostadin
Telerik team
answered on 09 Sep 2015, 10:52 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
Jonathan
Top achievements
Rank 1
Answers by
Kostadin
Telerik team
Jonathan
Top achievements
Rank 1
Share this question
or