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
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:
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/.
Rank 1
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?
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/.
Rank 1
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(); } }
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.