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/
Hello Ravi,
Thank you for the question.
A1
) or using export to HTML.Please find the jsfiddle for #1 and #2 here: https://jsfiddle.net/flexmonster/g3efnvao/
Please let us know if it helps.
Regards,
Ian
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
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
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
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