Problems with printer friendly grid

2 posts, 0 answers
  1. Tom Rasmussen
    Tom  Rasmussen avatar
    20 posts
    Member since:
    Jan 2009

    Posted 09 Oct 2012 Link to this post

    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.
  2. Daniel
    Daniel avatar
    4949 posts

    Posted 15 Oct 2012 Link to this post

    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.
Back to Top