Printing RadWindow Prints Parent Page in Background

14 posts, 0 answers
  1. John Pharr
    John Pharr avatar
    1 posts
    Member since:
    Jun 2008

    Posted 27 Jun 2008 Link to this post

    I am trying to print the content from the radwindow on a full page.

    I have tried an onload and print() on the page that opens in the rad window.  I have tried:

    function

    GetRadWindow()

    {

    var oWindow = null;

    if (window.radWindow) oWindow = window.radWindow;

    else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;

    return oWindow;

    }

    function Print()

    {

    var oWnd = GetRadWindowManager().GetWindowByName("twPrint");

    oWnd.GetContentFrame().contentWindow.print()

    }

    The problem is that no matter what way I try to print the content, It's like printing a screen shot of the parent window with the rad window content on top.  Any way to fix this?

  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 30 Jun 2008 Link to this post

    Hi John,

    As I understand it, you need to have the Print button in the content page, am I right? If this is so, please check the attached example that shows how to achieve this.
    If the button must be on the parent page, you will need to move the Javascript function there and replace
    var oWnd = GetRadWindow();
    with
    var oWnd = GetRadWindowManager().GetWindowByName("twPrint");



    Greetings,
    Georgi Tunev
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Jerry Jansen
    Jerry Jansen avatar
    37 posts
    Member since:
    Feb 2006

    Posted 28 Aug 2008 Link to this post

    Georgi,

    I am using your function here in your sample to print the content of radWindow with the "Print Content" button in the radWindow. It works, however, it also prints the "Print Content" button. Is there any way to move the "Print Content" button to the title bar of radWindow or use a print icon to print the contents?
  4. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 29 Aug 2008 Link to this post

    Hi Jerry,

    Yes, you can do this - the following KB article shows how to put a custom button in RadWindow's titlebar:
    http://www.telerik.com/support/kb/article/b454K-hdt-b454T-cec-b454c-cec.aspx




    Greetings,
    Georgi Tunev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. Jerry Jansen
    Jerry Jansen avatar
    37 posts
    Member since:
    Feb 2006

    Posted 02 Sep 2008 Link to this post

    Thanks Georg,

    I can get the print icon to show up in the title bar now. But, I can't figure how to print the radwindow contents by clicking on the print icon. The example shows using a callbackfunction on the calling page. Sorry, I don't know much about javascript. Can you give me a bit more help?

    Thanks,

    Jerry
  6. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 03 Sep 2008 Link to this post

    Hello Jerry,

    You can use the same code as the one provided here (PrintRadWindow.zip). Since now the button is actually on the parent page, you only need to move the Javascript function there (on the main page) and replace

    var oWnd = GetRadWindow();

    with
    var oWnd = GetRadWindowManager().GetWindowByName("twPrint");



    Regards,
    Georgi Tunev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  7. Jerry Jansen
    Jerry Jansen avatar
    37 posts
    Member since:
    Feb 2006

    Posted 03 Sep 2008 Link to this post

    Thanks Georgi,

    I finally got this to work and my code is enclosed below. The only minor problem is that when you click on the print icon, it also changes the state of the pin icon. Anyway to prevent this from happening?

    Jerry J. Jansen

    Added to my style sheet
    --------------------------------
    .custombutton
    {
        background: url(images/printbar.gif);
    }
    .custombutton:hover
    {
        background: url(images/printbar.gif) 0 -26px; 
    }
    --------------------------------

    Added to parent page
    --------------------------------
        <script type="text/javascript">
            
            function openRadWindow(Member_ID) {
                var oWnd = radopen("ShowMember.aspx?MemberID=" + Member_ID, "rwShowMember");
                var TitleBar = oWnd.GetTitlebar();
                var parent = TitleBar.parentNode;
                var oUL = parent.getElementsByTagName('UL');
                oUL[0].style.width = "192px";
                var oLI = oUL[0].getElementsByTagName('LI');
                var newLI = oLI[0].cloneNode(true);
                var newA = newLI.getElementsByTagName('a');
                newA[0].className = "custombutton";
                newA[0].title = "Print Content";
                newA[0].lastChild.innerHTML = "Print Content";
                newA[0].onmousedown = printWin;
                oUL[0].insertBefore(newLI, oLI[0]);
                oWnd.center();
            }
            
            function printWin() {
                var oManager = GetRadWindowManager();
                var oWnd = oManager.GetWindowByName("rwShowMember");
                var content = oWnd.GetContentFrame().contentWindow;
                var printDocument = content.document;
                if (document.all) {
                    printDocument.execCommand("Print");
                }
                else {
                    content.print();
                }
            }
       
    </script>

    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Default" Width="600"
        Height="650" VisibleStatusbar="False" ReloadOnShow="False" ShowContentDuringLoad="False" DestroyOnClose="True">
        <Windows>
            <telerik:RadWindow runat="server" Left="" NavigateUrl="ShowMember.aspx" Style="display: none;"
               Top="" ID="rwShowMember" Title="Member's Information" VisibleStatusbar="False"
               InitialBehavior="None">
             </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>
    --------------------------------
  8. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 04 Sep 2008 Link to this post

    Hello Jerry Jansen,

    In such case you will need to use a slightly modified version of the code - please find it attached below:

    <head runat="server"
        <title>Untitled Page</title> 
        <style type="text/css"
        .custombutton 
        background: url(images/printbar.gif); 
    .custombutton:hover 
        background: url(images/printbar.gif) 0 -26px;  
         
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server"
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
        <script type="text/javascript"
             
            function openRadWindow(Member_ID) { 
                var oWnd = radopen("ShowMember.aspx?MemberID=" + Member_ID, "rwShowMember"); 
                var TitleBar = oWnd.GetTitlebar(); 
                var parent = TitleBar.parentNode; 
                 
                var oUL = parent.getElementsByTagName('UL')[0]; 
                oUL.style.width = "192px"
                 
                var li = document.createElement("LI"); 
                var a = document.createElement("A"); 
                li.appendChild(a);                         
                a.className = "custombutton"
                a.title = "Print Content";             
                a.onmousedown = printWin
                             
                oUL.insertBefore(li, oUL.firstChild); 
                oWnd.center(); 
            } 
             
            function printWin(e) { 
                var oManager = GetRadWindowManager(); 
                var oWnd = oManager.GetWindowByName("rwShowMember"); 
                var content = oWnd.GetContentFrame().contentWindow; 
                var printDocument = content.document; 
                if (document.all) { 
                    printDocument.execCommand("Print"); 
                } 
                else { 
                    content.print(); 
                } 
                 
                //Cancel event! 
                if (!e) e = window.event; 
                 
                return $telerik.cancelRawEvent(e); 
            } 
        
    </script> 
     
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Default" Width="600" 
        Height="650" VisibleStatusbar="False" ReloadOnShow="False" ShowContentDuringLoad="False" DestroyOnClose="True"
        <Windows> 
            <telerik:RadWindow runat="server" Left="" NavigateUrl="ShowMember.aspx" Style="display: none;" 
               Top="" ID="rwShowMember" Title="Member's Information" VisibleStatusbar="False" 
               InitialBehavior="None"
             </telerik:RadWindow> 
        </Windows> 
    </telerik:RadWindowManager> 


    All the best,
    Georgi Tunev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  9. Jerry Jansen
    Jerry Jansen avatar
    37 posts
    Member since:
    Feb 2006

    Posted 04 Sep 2008 Link to this post

    Thanks Georgi,

    That works great.

    The only problem now is if I change the skin of the radwindow from "Default" to another skin, say "Web20", then my print icon is displayed as another pin icon. Again, I only change the radwindow skin, everything else is the same. Changing to the "Telerik" skin and then my print icon is displayed as the minimize icon. All other skins display something different than the print icon. The print function still works, just the icon is not shown correctly.
  10. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 05 Sep 2008 Link to this post

    Hi Jerry,

    You need to use the !important directive in your CSS then. Otherwise the class is set from the RadWindow code and override yours:

    .custombutton 
        backgroundurl(images/printbar.gif) !important; 
    .custombutton:hover 
        backgroundurl(images/printbar.gif) 0 -26px !important;  

    As a small appreciation for your feedback that showed me some problems in the KB article, I updated your Telerik points. I will also edit the article with the final version of the code (that is in case we don't find other problems of course :) )



    Greetings,
    Georgi Tunev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  11. Jerry Jansen
    Jerry Jansen avatar
    37 posts
    Member since:
    Feb 2006

    Posted 05 Sep 2008 Link to this post

    Thanks Georgi,

    That works. I would have to make changes to my print icon depending on the skin I choose.

    I would like to see this as a built-in feature of radWindow. Maybe turned off by default.

    Can you tell me what this line does:
    UL.style.width = "192px";

    As I can comment it out and it does not make any difference on all of the built-in skins. Maybe it is not needed?

    Also, the preview of the skins for radWindow for the Sunset skin shows the default skin.

    Jerry
  12. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 08 Sep 2008 Link to this post

    Hi Jerry,

    I logged your suggestion in our database and we will consider it. As for the width I suppose that it was included for specific scenario when the initial version of the code was created.



    Best wishes,
    Georgi Tunev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  13. Thomas Kopp
    Thomas Kopp avatar
    4 posts
    Member since:
    Aug 2009

    Posted 14 Aug 2009 Link to this post

    Hi Georgi;

    I have been unable to get your example to work.  Here is my page code, adapted slightly to link to the page I want my rad window to open (and also to the name of the print image - 404 x 19 px)

    Thanks!

    <%

    @ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

     

    <%

    @ Register assembly="RadWindow.Net2" namespace="Telerik.WebControls" tagprefix="rad" %>

     

    <

     

    html xmlns="http://www.w3.org/1999/xhtml">

     

    <

     

    head id="Head1" runat="server">

     

     

    <title>Untitled Page</title>

     

     

    <style type="text/css">

     

     

    .custombutton

     

    {

     

    background: url(images/print.gif);

     

    }

    .custombutton:hover

     

     

    {

     

    background: url(images/print.gif) 0 -26px;

     

    }

     

     

    </style>

     

    </

     

    head>

     

    <

     

    body>

     

     

    <form id="form1" runat="server">

     

     

    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

     

     

    <script type="text/javascript">

     

     

     

    function openRadWindow() {

     

     

    var oWnd = radopen("RecipientList.aspx", "rwShowMember");

     

     

    var TitleBar = oWnd.GetTitlebar();

     

     

    var parent = TitleBar.parentNode;

     

    alert(parent);

     

    var oUL = parent.getElementsByTagName('UL')[0];

     

    oUL.style.width =

    "192px";

     

    alert(oUL);

     

    var li = document.createElement("LI");

     

     

    var a = document.createElement("A");

     

    li.appendChild(a);

    a.className =

    "custombutton";

     

    a.title =

    "Print Content";

     

    a.onmousedown = printWin;

     

    oUL.insertBefore(li, oUL.firstChild);

    oWnd.center();

    }

     

     

    function printWin(e) {

     

     

    var oManager = GetRadWindowManager();

     

     

    var oWnd = oManager.GetWindowByName("rwShowMember");

     

     

    var content = oWnd.GetContentFrame().contentWindow;

     

     

    var printDocument = content.document;

     

     

    if (document.all) {

     

    printDocument.execCommand(

    "Print");

     

    }

     

    else {

     

    content.print();

    }

     

     

    //Cancel event!

     

     

    if (!e) e = window.event;

     

     

     

    return $telerik.cancelRawEvent(e);

     

    }

     

    </

     

    script>

     

     

    <input type="button" id="openBtn" onclick="openRadWindow(); return false;" title="Open" value="Show Recipient List" />

     

    <

     

    telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Default" Width="600"

     

     

    Height="650" VisibleStatusbar="False" ReloadOnShow="False" ShowContentDuringLoad="False" DestroyOnClose="True">

     

     

    <Windows>

     

     

    <telerik:RadWindow runat="server" Left="" NavigateUrl="RecipientList.aspx" Style="display: none;"

     

     

    Top="" ID="rwShowMember" Title="Member's Information" VisibleStatusbar="False"

     

     

    InitialBehavior="None">

     

     

    </telerik:RadWindow>

     

     

    </Windows>

     

    </

     

    telerik:RadWindowManager>

     

    </

     

    form>

     

    </

     

    body>

     

    </

     

    html>


     

  14. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 17 Aug 2009 Link to this post

    Hi Thomas,

    Your code looks fine and is working as expected. The only problem that I see is that you have not used the !important directive in the CSS of the custom button (like noted in this reply) and because of this, the styling of the button is not correct.

    If you still experience problems with this scenario, please open a support ticket and send us a project that reproduces it so we could check it.


    Sincerely yours,
    Georgi Tunev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top