Skip to content

Commit bc5e144

Browse files
author
Dimo Dimov
committed
Improve Grid printing docs
1 parent bf099ce commit bc5e144

File tree

1 file changed

+10
-2
lines changed

1 file changed

+10
-2
lines changed

web/grid/print-export.md

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,16 @@ In most cases the Grid is not the only content on the page, however, there are c
1515

1616
The example below shows how to implement the second option. There are some other important things to keep in mind, which are also addressed by the provided example.
1717

18-
* If the Grid is scrollable, some rows or columns may not be visible on the printed paper. You need to ensure that the Grid has no height during printing, and the scrollability of the data area is disabled.
18+
* If the Grid is scrollable, some rows or columns may not be visible on the printed paper. You need to ensure that the Grid has no height during printing,
19+
and the scrollability of the data area is disabled.
20+
* Depending on the column width, some cell content may not be fully visible.
21+
This problem is resolved by forcing an automatic `table-layout` to the Grid table, which disables the ellipsis (...).
1922
* Browsers repeat table headers on each printed page automatically. However, when the Grid is scrollable, it renders a separate table for the header area.
20-
Since the browser cannot understand the relationship between the two Grid tables, it will not repeat the header row. This problem is resolved by cloning the header row inside the data table.
23+
Since the browser cannot understand the relationship between the two Grid tables, it will not repeat the header row.
24+
This problem is resolved by cloning the header row inside the data table.
25+
26+
Printing a Grid with locked (frozen) columns is likely to produce misaligned columns or rows, or a broken overall layout.
27+
In such cases it is advisable to use a separate print-friendly page with no frozen columns.
2128

2229
### Example
2330

@@ -49,6 +56,7 @@ Since the browser cannot understand the relationship between the two Grid tables
4956
'.k-grid { border-top-width: 0; }' +
5057
'.k-grid, .k-grid-content { height: auto !important; }' +
5158
'.k-grid-content { overflow: visible !important; }' +
59+
'div.k-grid table { table-layout: auto; width: 100% !important; }' +
5260
'.k-grid .k-grid-header th { border-top: 1px solid; }' +
5361
'.k-grid-toolbar, .k-grid-pager > .k-link { display: none; }' +
5462
'</style>' +

0 commit comments

Comments
 (0)