Get Free Trial

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

Jaffrezic asked on June 8, 2020

When we have more columns then pivot is not supporting classic form.Its giving warning message “Too many columns for classic form. Switched layout to compact form.” 
Could be an option to disable that feature too ?
Or switched to compact mode but export to classic mode ?
this is very important for our customers…

3 answers

Illia Yatsyshyn Illia Yatsyshyn Flexmonster June 9, 2020

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.

Jaffrezic June 10, 2020

Hello Illia
Thanks for you answer.
Our customers understand switching to compact mode.
But they would like to be able to export in classic mode when the compact mode is activated.
Could you do this development ?
It’s very, very important for our customers

Illia Yatsyshyn Illia Yatsyshyn Flexmonster June 11, 2020

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; = ((pivot.gridColumnCount() - 1) * 110 + pivot.getRows().length * 110) + "px";
grid: {
type: "classic"

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 ("exportcomplete");).
Finally, the export itself can be performed after a short timeout.

pivot.on("exportcomplete", () => {"exportcomplete");
grid: {
type: "compact"
pivot.refresh(); = initialWidth + "px";
setTimeout(() => {
}, 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:

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

Please login or Register to Submit Answer