HIDING CONTROLS WHEN PRINTING WITH WINDOW.PRINT()

Sometimes in web applications (ASP.NET) we prefer printing a window without some controls that appear on the interface. For example, printing a window by clicking on a print button without showing the print button on the printed document. In this example we are printing a student’s results without showing the Print and the close buttons.

To start, we place the two control in a DIV control.Drag the “DIV” control from the HTML controls section. Name the DIV control by giving a value to ID property as shown below. Place the print and close button in the DIV control.

clip_image002

Note that in creating ASP.NET applications, there are two types of source codes, the VB/C# source code and the HTML code. First we create a script to hide the DIV control as shown below. In the script below the “dv1” is the ID value of the DIV control

Add this script to the HTML source

   1: <script language="javascript" type="text/javascript">

   2:    function hidePrint(){

   3:     document.getElementById("dv1").style.display='none';

   4:     window.print();

   5:     window.close();

   6:             }

   7: </script>

Note that the script should be in between the <head></head> tag of the html source code

Select the print button and go to the html source code and add the onclick property . The value of the onclick property should be the created javascript function (named hidePrint()). The button’s html code should look like the one below after the addition of the onclick property

   1: <input type="button" id="Button1" runat="server" 

   2: value="Print" class="fltbutton"  style="width:60px" 

   3: onclick="javascript:hidePrint();" />

This is all you have to do and you are good to go.

Below is a window showing the student’s results and the Print and the Close Button

clip_image004

What is printed after clicking on the “print” button

clip_image006

Cheers!!!!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s