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

Problems with printer friendly grid

1 Answer 49 Views
This is a migrated thread and some comments may be shown as answers.
Tom Rasmussen
Top achievements
Rank 1
Tom Rasmussen asked on 09 Oct 2012, 07:14 PM
I'm having some issues with the display of a RadGrid in a printer friendly window.  I have a simple RadWindow that combines multiple elements (RadGrids and other divs) into a single printable flow.  When the window is opened the following code runs to generate the content:
var multiPage = $find('<%= InquiryDetailNotesMultiPage.ClientID %>');
var tabStrip = $find("<%= InquiryDetailNotesTabStrip.ClientID %>");
var baseId = "<%= CombinedNotesArea.ClientID %>".replace("CombinedNotesArea", "");
var baseGridId = "<%= InquiryDetailCombinedGrid.ClientID %>".replace("InquiryDetailCombinedGrid", "");
var views = multiPage.get_pageViews();
var tabs = tabStrip.get_tabs();
var additionalInformationHtml = "";
for (var i = 0; i< views.get_count(); i++) {
    var view = views.getPageView(i);
    var tab = tabs.getTab(i);
    var grid = $find(baseGridId + "InquiryDetail" + tab.get_text().replace(" ", "") + "Grid");
    if (grid) {
        additionalInformationHtml = "Additional Information - ";
        additionalInformationHtml += tab.get_text();
        additionalInformationHtml += view.get_element().children[0].outerHTML;
    document.getElementById(baseId + tab.get_text().replace(" ", "") + "NotesArea").innerHTML = additionalInformationHtml;
This basically iterates a tabstrip/multipage and grabs the grids on each then takes injects the html of each into a pre-defined area on "Print Preview" window.  This works fine and the content looks correct.  After clicking a print button a separate script is called that takes this content and passes it to an iFrame and calls print() as described here:  I am also trying to maintain the grid styles as described here:  This is my print function:
function CallPrint() {
    var content = $get("<%= PrintableArea.ClientID %>").innerHTML;
    var styleSheet = '<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(Page, InquiryDetailOnlineActivityGrid.GetType(), String.Format("Telerik.Web.UI.Skins.{0}.Grid.{0}.css", InquiryDetailOnlineActivityGrid.Skin)) %>';
    var baseStyleSheet = '<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(Page, InquiryDetailOnlineActivityGrid.GetType(), "Telerik.Web.UI.Skins.Grid.css") %>';
    //remove any script elements
    content = content.replace( /<script .*?>(.|\n)*?<\/script>/gi , "");
    var printIframe = $get("ifmcontentstoprint");
    var printDocument = printIframe.contentWindow.document;
    printDocument.designMode = "on";;
    printDocument.write("<html><head><link href = '" + styleSheet + "' rel='stylesheet' type='text/css'><link href = '" + baseStyleSheet + "' rel='stylesheet' type='text/css'></head><body>" + content + "</body></html>");
    try {
        if (document.all) {
            printDocument.execCommand("Print", null, false);
        else {
    catch (ex) {
        alert("error printing");

Unfortunately what comes back is a little odd.  Not all of the styling is there and the print appears to be inserting some odd page breaks based on the content.  See attached screenshots for examples.  I'm sure I'm missing something simple here.  Any help would be appreciated.

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 15 Oct 2012, 08:35 AM
Hello Tom,

I would recommend that you examine the following link:
How to print background images in Chrome

As to the automatic page breaking, I'm afraid that it is the browser that decides how and where to break the page.

Best regards,
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Asked by
Tom Rasmussen
Top achievements
Rank 1
Answers by
Telerik team
Share this question