Need a special offer?Find out if your project fits.
+

How to print page with hidden widgets

Answered
chad 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.
 

6 answers

Public
Tanya Gryshko Tanya Gryshko Flexmonster 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

Public
Tanya Gryshko Tanya Gryshko Flexmonster 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

Public
chad 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

Public
Dmytro Zvazhii Dmytro Zvazhii Flexmonster 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

Public
Dmytro Zvazhii Dmytro Zvazhii Flexmonster 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

Public
chad October 26, 2018

The new event works fine, thank-you!  Chad

Please login or Register to Submit Answer