Printing the Grid
This article shows in detail how to achieve a printer-friendly Angular Grid component. Such Grid displays all columns and rows along with the content of the cells in the browser print window.
The article covers the following common print scenarios:
To ensure the Grid is prepared for printing, manipulate the dimensions with custom CSS or retrieve the correct set of data in advance. Due to various use cases, such adjustments are up to the developer to implement.
Printing Scrollable Grids
To print the Grid while having scrollbars, set the scrollable option to none and remove any predefined width and height CSS styles that are attached to the Grid component. As a result, the Grid will display its rows and columns and they will be visible once the printing is initialized. After the printing is done, revert the Grid back to its initial look.
The following example demonstrates how to print the Grid when scrolling is enabled.
Printing Pageable Grids
To print the Grid while the paging feature is active, set the pageable option to false and the pageSize to 0. Remove any predefined width and height CSS styles that are attached to the Grid component. As a result, the Grid will expand all of its rows and columns and they will be visible once the printing is initialized. After the printing is done, revert the Grid back to its initial look.
The following examples demonstrates how to print the Grid when paging is enabled.
Limitations
As browsers are limited as of how much data they can display, it is recommended that you use these printing techniques with smaller sets of data. Enabling printing for larger sets of data will cause the web page to generate lots of DOM elements and the browser to slow down or become unresponsive.