PDF document layout of datagrid2

0
I have a problem with creating a PDF using PDF Document Generation and a datagrid2 list. The columns are shown underneath each other, instead as columns. PDF's look fine when created locally on a PC. Same issue on Firefox and Chrome. We added the page to navigation like Suggested, and the datagrid shows perfectly.   Are other people having the same issue?  
asked
5 answers
0

Hi Rob, we had some issues with differences between cloud and local generation aswell. If you still want to use the Datagrid2 (which should be possible), and have a bit more possibilities while debugging, try the following:

 

Your cloud environment will use chromium to generate the PDF, your local will use Chrome. You can configure your local environment to use the same chromium configuration by correctly setting up your constant. The configuration document has a section about using chromium: 

 

-------

If you use Chromium, only use stable releases. The currently supported stable release is 112.0.5615.0.

Download the chrome-win.zip package and extract the archive to a location of your choosing.

Configure the path to the chrome.exe executable in the CustomChromePath constant in the _UseMe > Configuration folder.

----

 

By doing this you can at least replicate the document generation in the same way your Cloud environment does. Combined with the functionality to show the page it will at least give you some more to work with.

 

Hope this helps!

answered
1

In our case, it was caused by an issue in the Data Grid 2, and seems to be fixed in 3.8.0:


"### Fixed

- We fixed an issue where custom content would overflow its container cell."

answered
0

Thank you!

Chromium does not display columns correctly of a Datagrid2, what explains it.

 

answered
0

Hi,


This behavior is expected when using Data Grid 2 inside a page that is rendered for PDF generation.

Data Grid 2 is built with client-side React components and CSS grid layout, and those styles are applied by the browser at runtime. The PDF Document Generation module does not render the page in a full browser context, so many of the CSS layout rules used by Data Grid 2 are not interpreted correctly. When that happens, the grid layout collapses and the columns appear stacked vertically, which is exactly what you are seeing.

That is why the grid looks correct when you open the page normally in the browser, but the layout breaks when the same page is rendered for PDF.

In practice, Data Grid 2 is not supported for PDF layouts. The usual workaround is to create a separate page specifically for the PDF and use components that render reliably in the PDF engine, for example:

  • a Table widget
  • a List View
  • or a simple layout grid that mimics a table

Bind the same data source to that page and generate the PDF from that page instead of the one containing Data Grid 2.

This approach is generally what people use when exporting tabular data to PDF in Mendix, because it avoids the client-side layout limitations of Data Grid 2.


answered
0

The issue is that DataGrid2 uses the following CSS: 


.widget-datagrid-grid-head, .widget-datagrid-grid-body 
   { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1;}


"grid-template-columns: subgrid;" is not supported (yet) by the stable Chromium version Mendix Cloud uses to create the PDF.


A workaround is to hardcode the number of columns, e.g. 14 columns:


.widget-datagrid-grid.table { grid-template-columns: repeat(14, 1fr) !important;}.widget-datagrid-grid-head,.widget-datagrid-grid-body { grid-template-columns: repeat(14, 1fr) !important;}


In this example all 14 columns will have the same width. Please be aware to apply this snippet to the PDF page only.



answered