asked on September 20, 2018
We want to create a dashboard that has multiple pages of widgets, only displaying one page at a time, but when the user hits print, we want to print all pages. We plan on showing/hiding pages that are already loaded in the dom (sessentially showing/hiding div elements).
Here is a sample based on your dashboard example:
http://jsfiddle.net/cbutton/npsz5rck/102/
Notice how widgets do not display properly when they are initially hidden. Is there a way we can get this to work?
Thanks.
⋅ September 21, 2018
Hello, Chad,
Thank you for writing to us!
We can see the issue you described. Our development team needs more time for research. Next week we will contact you with the results.
Please let me know in case of any other questions.
Regards,
Tanya
⋅ September 25, 2018
Hello, Chad,
Our development team has researched this question deeper. We have come up with a solution that would allow printing page with hidden widgets. Please check the updated sample on JSFiddle: http://jsfiddle.net/flexmonster/x6t4bLc3/. When hitting 'Print all', each widget is visible. How it works:
1) We removed @media print styles from CSS section:
@media print {
#page2, #printAll {
display: initial;
}
}
and replaced them with JavaScript code (line 2 in JavaScript block):
document.getElementById("page2").style.display = "initial";
2) We have added refresh() method for each widget that was invisible (line 11):
pivot2.refresh();
pivot3.refresh();
pivot4.refresh();
3) After the widget with the table is done refreshing, it fires aftergriddraw event. We have added a handler for this event. Inside this handler, window.print() is called and display is changed back to "none". Please note that aftergriddraw event is fired only for grid and not for charts. If the approach suggested in this JSFiddle example works for you, we can add the same event for charts. This would allow being sure that all hidden widgets are visible when printed.
Waiting for your feedback.
Regards,
Tanya
⋅ September 27, 2018
Yes, this solution works for us. If after*draw event was added to charts that would completely solve this issue.
Thanks! Chad
⋅ October 1, 2018
Hello, Chad,
Thank you for your feedback. We are glad that the suggested solution works fine for you.
Also, you are totally right about the after*draw event for the charts. That will definitely solve the case. Therefore, our dev team is going to add the necessary update into the minor release on ETA Oct 22. It should include the new event for the charts.
Regards,
Dmytro
⋅ October 23, 2018
Hello Chad,
We are glad to inform you that the new event afterchartdraw is already available in the latest version. We have prepared a JSFiddle sample for you that uses both events aftergriddraw and afterchartdraw https://jsfiddle.net/flexmonster/ks4mfurh/.
You are welcome to update to the latest version.
Please let us know if the new event works fine for you.
Regards,
Dmytro
⋅ October 26, 2018
The new event works fine, thank-you! Chad