Printing RadWindow Prints Parent Page in Background

[John Pharr]

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?

[Georgi Tunev]

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

[Jerry Jansen]

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?

[Georgi Tunev]

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.

[Jerry Jansen]

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

[Georgi Tunev]

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.

[Jerry Jansen]

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>
--------------------------------

[Georgi Tunev]

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.

[Jerry Jansen]

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.

[Georgi Tunev]

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
{
    background: url(images/printbar.gif) !important;
}
.custombutton:hover
{
    background: url(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.

[Jerry Jansen]

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

[Georgi Tunev]

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.

[Thomas Kopp]

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>

 

[Georgi Tunev]

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.