This is a migrated thread and some comments may be shown as answers.

Issue with printing a pane and closing the popup afterwords

5 Answers 11 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 20 Apr 2021, 12:59 PM

On my web application I need to offer users a way to print a pane, and I have been using the javascript function to do that( https://docs.telerik.com/devtools/aspnet-ajax/controls/splitter/panes/printing-content ). But the problem is that there is a popup of the pane contents that remains after they have finished printing. And this can be confusing for some people as they may still think the popup is an editable form.

I have been using the code from this forum post: https://www.telerik.com/forums/radpane-close-after-print 

But it only works on IE, which is now obsolete and removed from all of our employee's machines. On Chrome and Edge it will simply try to print a blank page, as the print dialog appears before the popup is actually rendered.

Is there any solution for this that works properly on Edge and Chrome?

 

 

 

5 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 20 Apr 2021, 06:23 PM

Hi Ryan,

As stated in the found by you thread, the Splitter's Print() functionality is based on the browser print() so, unfortunately, we are dependent on the behavior of each browser here. As a possible option, you can try the window's onAfterPrint event:

https://developer.mozilla.org/en-US/docs/Web/API/Window/afterprint_event

Or try the solutions found by the other developers here:

https://stackoverflow.com/questions/59189660/close-window-automatically-after-printing-dialog-closes-chrome

Regards,
Vessy
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ryan
Top achievements
Rank 1
answered on 20 Apr 2021, 06:52 PM

Thank you for the response.

I would like to try the other methods, but I cannot get it to print at all using the RadPane print() on the linked post. It just tries to print an empty page, and only renders the page after I have cancelled the print. 

This is not what happens if I do not override the method, so was this method updated or is there something else I have to add?

0
Vessy
Telerik team
answered on 21 Apr 2021, 12:50 PM

Hi Ryan,

Yes, you are right -  the print() method is being changed during the years. Below you can see how it looks taken from the latest release:

            Telerik.Web.UI.RadPane.prototype.print = function (arrCssFiles) {
                /// <summary>
                /// print the content of the pane. If the pane is not displaying 
                /// external content the printed content will be formatted using the specified cssFiles.
                /// </summary>
                var browser = Telerik.Web.Browser;
                var sFeatures = 'width=' + this.get_width() + 'px, height=' + this.get_height() + 'px, scrollbars=1';
                var previewWndUrl = (this.isExternalContent()) ? this.get_contentUrl() : 'about:blank';
                var previewWnd = window.open(previewWndUrl, '', sFeatures);

                if (this.isExternalContent()) {
                    try {
                        var t = function () {
                            previewWnd.print();
                        };
                        setTimeout(t, 1000); // wait until the content is loaded

                    } catch (e) { }
                    return;
                }

                var styleStr = "";
                if (arrCssFiles) {
                    styleStr = "<head>";

                    for (var i = 0, length = arrCssFiles.length; i < length; i++) {
                        styleStr += "<link href = '" + arrCssFiles[i] + "' rel='stylesheet' type='text/css'></link>";
                    }
                    styleStr += "</head>";
                }

                var popupContent = styleStr + "<body>" + this.get_content() + "</body>";

                previewWnd.document.open();
                previewWnd.document.write(popupContent);
                previewWnd.document.close();

                if (browser.chrome) {
                    var previewWndLoad = function () {
                        previewWnd.print();
                        $removeHandler(previewWnd, "load", previewWndLoad);
                    };
                    $addHandler(previewWnd, "load", previewWndLoad);
                } else {
                    previewWnd.print();
                }
            }

 

Regards,
Vessy
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ryan
Top achievements
Rank 1
answered on 21 Apr 2021, 06:28 PM

Thank you Vessy. That code worked and I was able to figure out how to get the popup to close.

Here is the over-ride with my added code(one line adding a function to onafterprint):

Telerik.Web.UI.RadPane.prototype.print = function (arrCssFiles) {
             /// <summary>
             /// print the content of the pane. If the pane is not displaying
             /// external content the printed content will be formatted using the specified cssFiles.
             /// </summary>
             var browser = Telerik.Web.Browser;
             var sFeatures = 'width=' + this.get_width() + 'px, height=' + this.get_height() + 'px, scrollbars=1';
             var previewWndUrl = (this.isExternalContent()) ? this.get_contentUrl() : 'about:blank';
             var previewWnd = window.open(previewWndUrl, '', sFeatures);
 
             if (this.isExternalContent()) {
                 try {
                     var t = function () {
                         previewWnd.print();
                     };
                     setTimeout(t, 1000); // wait until the content is loaded
 
                 } catch (e) { }
                 return;
             }
 
             var styleStr = "";
             if (arrCssFiles) {
                 styleStr = "<head>";
 
                 for (var i = 0, length = arrCssFiles.length; i < length; i++) {
                     styleStr += "<link href = '" + arrCssFiles[i] + "' rel='stylesheet' type='text/css'></link>";
                 }
                 styleStr += "</head>";
             }
 
             var popupContent = styleStr + "<body>" + this.get_content() + "</body>";
 
             previewWnd.document.open();
             previewWnd.document.write(popupContent);
             previewWnd.document.close();
             previewWnd.onafterprint = function () { previewWnd.close(); }
 
             if (browser.chrome) {
                 var previewWndLoad = function () {
                     previewWnd.print();
                     $removeHandler(previewWnd, "load", previewWndLoad);
                 };
                 $addHandler(previewWnd, "load", previewWndLoad);
             } else {
                 previewWnd.print();
             }
         }

 

0
Vessy
Telerik team
answered on 22 Apr 2021, 03:14 PM

Hi,

Thank you for sharing the found solution with the community, Ryan! I am glad the Splitter behaves as desired now.

Regards,
Vessy
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Splitter
Asked by
Ryan
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Ryan
Top achievements
Rank 1
Share this question
or