Dear visitor, despite the COVID-19 outbreak, our team continues operating at full speed.

Also, here is the form where you can apply for a special discount and we will contact you with possible options. Stay safe and continue achieving your business goals.

Fill the form
Get Free Trial
Get Free Trial

How to export all gird data in a single page?

Ravi asked on January 9, 2019

I am an licensed user and I have below two questions,
1.How to export all gird data in a single page without splitting-up into multiple pages ?
2. How should I add ‘title-header text’ to the top-center of this pdf page ?
       – I am using version 2.6.7. In this, ‘header and footer’ params not working. The below fiddle works because the version referred here is ‘2.6.11’.

For these, I have shared a fiddle link below, please make your changes in button(Export To PDF) at top of the pivot grid.
https://jsfiddle.net/2tz48rfk/7/

Attachments:
pivot-MultiPage.pdf

5 answers

Public
Ian Sadovy Flexmonster January 10, 2019

Hello Ravi,
 
Thank you for the question.

  1. The content is split into multiple pages on purpose. In case of many columns, the data would simply be unreadable. If you want to export all data on one page, we suggest setting a larger page format (e.g. A1) or using export to HTML.
  2. Header/footer feature is available in 2.6.7 and should work as expected. Anyway, you can easily update to the latest version: Updating to the latest version

Please find the jsfiddle for #1 and #2 here: https://jsfiddle.net/flexmonster/g3efnvao/
 
Please let us know if it helps.
 
Regards,
Ian

Public
Aaron April 16, 2020

Hi Ian,

Please see my 2 attachments. One for A3 and one for A1.

I have used your above JSFiddle to reproduce this so you should be able to reproduce it as well.
When exporting to PDF it doesnt matter what size the page is it still shows the same number of columns on the page regardless of page size. It just makes the columns much wider when you increase the page size. It doesnt actually fit in more columns on the page.

Also is there a way to override the existing Export to PDF button instead of having to create a separate button for Exporting to PDF?

Thanks,
Aaron
Adapt IT

Attachments:
A1.png
A3.png

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster April 16, 2020

Hi Aaron,
 
Thank you for posting your question.
 
As we can see from the provided screenshots, you are currently using the print() API call (the one bound to the “Print” toolbar button by default) to export the grid to PDF. Please note that the print() method automatically exports the view in A4 format.
 
What we’ve demonstrated in our example, however, is a different exportTo() API call which accepts more exporting options. More specifically, it allows you to specify the export format like this:
 

flexmonster.exportTo('pdf', {
pageFormat: "a1"
});

 
Speaking of overriding the default export button, it is indeed possible with the beforetoolbarcreated event, which allows you to customize the default Flexmonster toolbar in any way you like. To use it, you will need to define beforetoolbarcreated as a property of Flexmonster object when initializing the pivot table:
 

var pivot = new Flexmonster({
    container: "pivotContainer",
    toolbar: true,
    beforetoolbarcreated: customizeToolbar,
... });

 
After this, you will need to define the customizeToolbar function itself. Since the default toolbar is represented by an array of objects (tabs), it all comes down to simple manipulations with arrays. Finally, you can replace the default handler function of a tab (or an option from the tab’s drop-down menu) by redefining it in the customizeToolbar function:
 

function customizeToolbar(toolbar) {
let tabs = toolbar.getTabs();
toolbar.getTabs = function() {

let exportTab = tabs.filter(tab => {
return tab.title == "Export";
});

exportTab["0"].menu[5].handler = function() {
pivot.exportTo('pdf', {
pageOrientation: 'landscape',
pageFormat: 'a1'
});
}

return tabs;
}
}

 
A detailed description of this functionality can be found on the corresponding documentation page: https://www.flexmonster.com/doc/customizing-toolbar/
 
We’ve also prepared a quick JSFiddle example to illustrate the described approach: https://jsfiddle.net/flexmonster/gp3ove6w/
 
Please let us know if this helps.
 
Best regards,
Mykhailo

Public
Aaron April 17, 2020

Hi Mykhailo,

Thank you for the quick response. I appreciate that I was using the print option to demonstrate my problem but if I cannot get the print option to scale down to the width of a single page then I will have to remove the print option entirely because it serves no purpose. A user is unlikely to be interested in a printout of a report who’s columns span multiple pages. The only reports that would print or export normally would be ones with 3 or 4 columns maximum. That is not feasible in the real world as most reports are far more complex than that.

It would be great if you could include an option to scale the report to fit all the columns of the report into a single page regardless of the type of export being done. It is fine for the rows of the report to span multiple pages but it is not right for the columns to span multiple pages unless you were wanting to print something huge.
 
Thank you for the example for overriding the PDF option however this method then requires me to add my own dialog if the user wants to switch between Portrait and Landscape orientations. Would it not make more sense for you to add a page size dropdown to the Orientation popup that you guys already have implemented into the grid. This would be a far better option that suggesting a manual override of this functionality. You also also include a checkbox in the same dialog that says “Fit All Columns on a Single Page”. If you had the same popup before the print option it would solve a lot of problems I imagine for a lot of people.
 
Please do consider my feature request as the current suggestion is very clunky and only solves the issue for PDF export.
 
Thanks,
Aaron

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster April 21, 2020

Hi Aaron,
 
Please note that the columns are distributed between multiple pages by default because from our experience this is a preferable approach for many users – people often consider all columns reduced to one page unreadable.
 
However, for your use case, we’ve built a sample utilizing the already existing exportTo() method to export the pivot table view to HTML and print it with all columns fitting in one page regardless of the page format. Please see it by the following link: https://jsfiddle.net/flexmonster/xa8v16yd/
 
Speaking of your second point, at the moment there is no built-in UI functionality for the user to change the export options at runtime. However, this can be achieved by implementing your own pop-up window (or another UI element) with the corresponding options.
 
Please let us know if this helps.
 
Best regards,
Mykhailo

Please login or Register to Submit Answer