Too many columns for classic form. Switched layout to compact form.

Hello, Franck,
 
Thank you for contacting us.
 
Our team would like to kindly draw your attention to the fact that switching to the compact form is required to free up the space for scrollable content.
 
Columns and rows representing names of hierarchies are frozen and can not be scrolled. Therefore, when the whole space reserved for the component is filled with such columns/rows, there is no space left for measures themself.
 
Please see additional explanations on the screenshot attached.
 
To avoid automatic switching to the compact form please consider the following steps:

1. Increase the size of the HTML container for the pivot table component.
2. Resize some columns on the frozen area to leave more space for the scrollable area.
3. Try using Flexmonster in fullscreen mode so that there is more place for the columns to be drawn.

 
Do not hesitate to contact us in case other questions appear.
 
Regards,
Illia

Hello,
 
Thank you for reaching out to us.
 
Our team suggests considering using one of the following approaches.
 
Resize the container right before the export is started and restore the original size after it is completed.
We have prepared an example demonstrating the described approach.
 
We want to provide some explanation about the following code snippets used in the sample.
 
This part of the function is responsible for saving the original width of the container into the initialWidth variable. Next, its width is changed based on the number of columns and rows that are going to become columns when the mode will be switched to classic. Finally, the form is changed to classic using the setOptions API call and the component is refreshed (refresh method).

let container = document.querySelector("#pivotContainer");
let initialWidth = container.getBoundingClientRect().width;
container.style.width = ((pivot.gridColumnCount() - 1) * 110 + pivot.getRows().length * 110) + "px";
pivot.setOptions({
  grid: {
    type: "classic"
  }
});
pivot.refresh();

 
Next, some actions are bound on the exportcomplete event. It will be triggered as soon as the exporting will be finished. Restoring previously changed parameters (width and form) will be entailed. Please note that the handler for the exportcomplete event should be removed right after the event itself is triggered (pivot.off("exportcomplete");).
Finally, the export itself can be performed after a short timeout.

pivot.on("exportcomplete", () => {
  pivot.off("exportcomplete");
  pivot.setOptions({
    grid: {
      type: "compact"
    }
  });
  pivot.refresh();
  container.style.width = initialWidth + "px";
});
setTimeout(() => {
  pivot.exportTo("pdf");
}, 0);

 
Performing exporting on the server-side.
The previously described approach affects the page where the container is placed. In order to avoid this disadvantage, an additional operation can be added.
Instead of performing export on the client-side, send the report to the server and use another Flexmonster instance to apply it and generate the file.
The report can be sent to the server using the save API call. The destination and url parameters of the mentioned method should define an actual server that is going to be responsible for exporting.
Concerning the server-side exporting, we suggest checking out our documentation describing the way to export files without using a browser. It refers to the PhantomJS headless browser as the main tool. Even so, our recommendation is to use the Puppeteer instead, due to the fact that PhantomJS development and support are suspended.
 
Please find out more about used method end events:

• setOptions
• refresh
• exportcomplete
• on
• off
• save

 
Our team hopes it works for your case.
Please let us know in case any additional assistance is needed.
 
Kind regards,
Illia