Ag-grid is not responsive in PRINT format on full screen(s)

2
votes

There's an inbuilt function in ag-grid to deal with responsiveness based on screen size (mostly width) called gridApi.sizeColumnsToFit() which fits all the columns based on proportion of their widths mentioned. But the same thing doesn't happen if we try to print.

Things I've tried which didn't work:

  1. Tried calling gridApi.sizeColumnsToFit()on windows.onBeforePrint function.
  2. Tried using timeout for windows.print() so that ag-grid re-renders.
  3. Tried doing windows.resizeTo() with above two things, but as it doesn't suppport new browsers, or maybe that only works if you've opened the window with windows.open() & then use it.
  4. Tried setting the width of the ag-grid container on @media print css, still doesn't work as it doesn't re-render the table.
  5. Tried to make the table unresponsive before print, so that we can provide appropiate widths for the columns based on print width, but there's no such function to undo gridApi.sizeColumnsToFit().

Here's a snippet of same issue which I provided on ag-grid gitHub page regarding the same. Link: https://github.com/ag-grid/ag-grid/issues/3689

Created an example that should replicate the issue,

Plunker Link: https://next.plnkr.co/edit/6TIdd8Vzi3121G5E

In plunker, go to preview side, click on Open the preview in a seperate window button which is on the top right side of preview. Then click on print button.

Here's a preview link, if it works,: https://run.plnkr.co/preview/ck71wblt7000c3b69k4ho00cl/

Current behavior: All the columns are not visible in print (but visible in UI). If number of columns are larger or screen resolution is bigger (i.e. 1080p & above), the difference is more visible.

Expected behavior: As same in the UI, the ag-grid should be responsive in the print also, it shouldn't just replicate what's in the DOM & print whatever fits inside the print area. On click of print, either it should be responsive in the print format, or there should be some feature that we could provide some specific widths of all the column ourselves. (e,g, functions like gridApi.sizeColumnsToFit() should work on print)

Environment: Windows 10, Visual Studio Code

ag-Grid version: ^19.1.2 Browser: Chrome, Mozilla

Language: Angular 4+, TypeScript / JavaScript, HTML5

1
javascripthtmlangularag-gridag-grid-angular

1 Answers

0
votes

If #5 (making the grid "unresponsive" and setting the column widths appropriately for print) works for you as far as getting what you want when you print, you can "undo" by either calling columnApi.resetColumnState() if what you want is the grid state as defined in the columnDefs, or you can save the column sizes (see columnApi.getColumnState()) before you set them for print mode, and then set them back to those values afterward.