Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Ali
55
Printing the WebDialogWindow content ?
posted

How can I print the content of a WebDialogWindow  ?

I want to add a print button inside the WebDialogWindow  & when clicked it only will print me the content displayed in the window. (currently to do that it will print all the page :( )

Parents
No Data
Reply
  • 24497
    posted

    Hi,

    The WebDialogWindow is a child of page: exactly the same as any other html element on that page. In order to print only a part of html in browser, you may create a temporary window, set its content to desired html-value and call print() method of that temporary window.

    If that partial html (content pane of dialog) contains html elements which refer to global style, css sheets, or inherited from parent elements, which are located outside of dialog, and you want to preserve those style attributes in your print, then implementation of print can become very complex.

    In example below I showed how to get global css defined in <link> objects and copy them to temporary window. If content of dialog uses some other attributes, like explicit <style> objects or inherits styles from parent html element, then only a particular application may solve/implement similar issues and include those style attributes in temporary window.

    <script type="text/javascript">
    function printContentOfDialog(button)
    {
     var dialog = $find('<%=WebDialogWindow1.ClientID%>');
     if(!dialog)
     {
      alert('<%=WebDialogWindow1.ClientID%> not found');
      return;
     }
     // hide button (exclude from print)
     button.style.display = 'none';
     var html = dialog.get_contentPane().getBody().innerHTML;
     // show/restore button
     button.style.display = '';
     var win = window.open('', '', 'width=10,height=10');
     var head = '<head>';
     var sheets = window.document.styleSheets;
     for(var i = 0; i < sheets.length; i++)
      if(sheets[i].href)
       head += '<link type="text/css" rel="stylesheet" href="' + sheets[i].href + '" />';
     head += '</head>';
     win.document.write('<html>' +head + '<body>' + html + '</body></html>');
     win.document.close();
     win.print();
     win.close();
    }
    </script>
    <ig:WebDialogWindow ID="WebDialogWindow1" runat="server" Width="300px" Height="300px">
       <ContentPane>
        <Template>
         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
         <ig:WebMonthCalendar ID="WebMonthCalendar1" runat="server"></ig:WebMonthCalendar>
           <input type="button" value="Print" onclick="printContentOfDialog(this)" />
        </Template>
       </ContentPane>
    </ig:WebDialogWindow>

Children
No Data