Printing from DevExpress ASPxPopupControl

Googled and googled and couldn’t find an aricle on this so here it is a quick and easy way to print the contents from a DX ASPxPopupControl!

  1. Add an empty IFrame control to your page.
    <iframe id=”printIFrame” src=”#” style=”width: 0px; height: 0px”></iframe>
  2. Add a print button to the footer template of your ASPxPopupControl.
             <dx:ASPxPopupControl ID="rewardASPxPopupControl" runat="server" AllowDragging="True"             AllowResize="True" CloseAction="CloseButton" ContentUrl="~/Images/PoweredbyDevExpress.png"             EnableViewState="False" PopupHorizontalAlign="Center" PopupVerticalAlign="Middle"             ShowFooter="True" FooterText="Try to resize the control using the resize grip or the control's edges"             HeaderText="blog.longle.me" ClientInstanceName="rewardASPxClientPopupControl"             EnableHierarchyRecreation="True">             <ContentStyle HorizontalAlign="Center" VerticalAlign="Middle">                 <Paddings Padding="0px"></Paddings>             </ContentStyle>             <FooterTemplate>                 <div style="padding: 10px; text-align: right">                     <dx:ASPxButton ID="printASPxButton" runat="server" Text="Print" AutoPostBack="false"                         ClientInstanceName="printClientASPxButton">                         <ClientSideEvents Click="function(s,e){ printClientASPxButton_Click(s,e); }" />                     </dx:ASPxButton>                 </div>             </FooterTemplate>         </dx:ASPxPopupControl>
  3. Wire up your client side Click event on your Print button, all we are doing here is extracting the Html from the ASPxPopupControl and injecting this into the empty IFrame from step 1 and loading it, once loaded the onload event in the body tag will be raised bringing focus to this IFrame and then the .print() method will get invoked.
    function printClientASPxButton_Click(s, e) {
        var oIframe = document.getElementById('printIFrame');
        var oContent = '' +
            rewardASPxClientPopupControl.GetContentHtml() + '';
        var oDoc = (oIframe.contentWindow || oIframe.contentDocument);
        if (oDoc.document) oDoc = oDoc.document;
        oDoc.write(oContent);
        oDoc.close();
    }
  4. You should get a nice print dialog now.2-28-2011 10-11-08 PM
  5. I selected for it to print to my PDF print driver, and here is snapshot of the print out (obviously only of the content inside of the ASPxPopupControl.2-28-2011 10-17-54 PM

Example source code download:

http://cid-8ad26411740e6091.office.live.com/self.aspx/Source%20Code/ASPxPopupControlPrinting.zip

6 thoughts on “Printing from DevExpress ASPxPopupControl

  1. Interesting. I pasted the code into the blog but it won’t display the missing code. People, should downloaded the example to get the missing code.

    Like

  2. This works great, but the on-screen example needs a small modification. I downloaded your example and found the missing code there.

    var oContent = ‘title’ + rewardASPxClientPopupControl.GetContentHtml() + ”;

    Nice code. Thanks

    Like

Comments are closed.