Printing

This section explains how to use the Print Layout feature of the grid.

A grid using print layout will not use any scrollbars so all rows and columns will get printed. The grid will auto-size
width and height to fit all contents. This means if the grid is printed on paper all the cells will get included, as
opposed to printing a grid with scrollbars and only cells within the visible area will get printed.

Toggling Print Layout

Print layout can be turned on by setting the property dashGridOptions={"domLayout":"print"} . The layout can be set
back to normal by unsetting the domLayout property.

Toggling Grid Size

The grid width and height will adjust automatically to fit the contents of all cells. For this to work the application
should not set a width or height onto the grid component. If using print layout, make sure you have no width or
height set for the grid.

The examples on this page set width and height initially on the grid and then remove the width and height when print
layout is set.

Print Layout Example

The example below shows print layout. Note the following:

• Pressing the button ‘Printer Friendly Layout’ turns the grid into print layout and removes all scrolls.
• Pressing the button ‘Normal Layout’ returns the grid back to normal.

Print Report Example

The example below shows how to print a report including a grid with a printer friendly layout. Note the following:

• Pressing the button ‘Print Report’ opens a modal which contains the grid with a print layout.
• The grid in the modal maintains the sort and filters from the main page.
• Pressing the button ‘Print’ in the modal will open the browser’s print window.
• Only the content of the modal body is printed which allows you to customize the print content

Page Break

When in print layout all rows will have the CSS property page-break-inside: avoid so rows will not be split across
pages (eg the top half of the row on one printed page with the other half on the next printed page).

Animations & Redraw

When the grid is in print layout, the grid does not use absolute positioning for the rows, rather the rows are laid
out using normal flow. In other words normally the grid places each row using exact pixel positioning - this makes
things such as row animation possible where the grid moves the row by changing absolute pixel position and uses CSS
transition for the row to animate to the new location. This happens usually after filtering or sorting. When in print
mode, the rows are laid out in the order they appear in the dom - this makes things such as page breaks possible but
removes the possibility of animations.

When in print layout the grid will redraw the entire grid any time there is a change to the rows. If just one row is
added / removed, or a filter or sort is applied, the entire DOM is removed and all rows are inserted again from top to
bottom. This makes print layout best for non-interactive grids (for example for printing) as you will loose animations and
changes to the grid will be expensive (the grid redraws everything on every change).

Don’t Print Large Data

Do not use this technique for printing if you are showing a large number of rows or columns. This is not a problem with
the grid, it is a limitation on browsers on how much data they can easily display in one web page. If you try to render
lots of data into the web page, the web page will create lots of DOM elements and will either slow things down or simply
hang the browser. AG Grid gets around this problem by virtualising the rows and columns. However if you render the whole
grid, there is no possibility of virtualising the rows or columns.

If you want to allow printing large data sets it’s best to get your users to export to CSV or Excel and then print from
another non-web based application.

Keep Print Layout for Print Only

When the grid is in print layout, it will be rendering all cells without using row virtualisation. This means that the
grid will be slower given the amount of DOM it is rendering. Only use print layout when you actually want to print. All
of the functions (filtering, sorting, dragging columns etc) will work, however the performance will be impacted if the
data set is large and will frustrate your users. For this reason it’s best keeping print layout for printing only and
normal (or auto-height) layout at all other times.

Row Models

The only Row Model that print layout works with is the
default Clientside Row Model. It will not work
with the others, Infinite, Server-Side or Viewport. This is because the grid will render the entire data-set which goes
against the philosophy of the other row models which lazy load data.