Automatic printing using jquery

Question

I have data in the following format:

(Dummy Entries) (id = posGridView)

When I process a sale, a small receipt is automatically printed with the selected columns, and not with all columns.

Since all the data is available in this grid view, how can I print it dynamically with any format using jquery?

Edited

Actually I want to print dynamically in this format from the above grid view

Answer 1

Print

There is no need for jQuery to print a page, you just need a JavaScript function: window.print(); .

If you need to print specific content, you can hide the rest (and format the print area) using CSS:

 <style media="screen"> .noPrint{ display: block; } .yesPrint{ display: block !important; } </style> <style media="print"> .noPrint{ display: none; } .yesPrint{ display: block !important; } </style> 

As you can see, by setting the media attribute of your style tag, you can configure the styles for both the normal view (screen) and the print mode (print). Full article here .

Dynamism

You can add a certain dynamism to the process, but keep in mind that it can be dynamic for the user, but you need to find an event in your code to attach the seal . This event can be a click on the anchor:

<a href='javascript:window.print();'>Print</a>

This could be the onload event on your page:

 window.onload = function () { window.print(); } 

Or any other event you might need to know (note that I'm using jQuery now):

 var doPrintPage; function printPage(){ window.print(); } $(document).ready(function(){ $('input').blur(function(){ //3sec after the user leaves the input, printPage will fire doPrintPage = setTimeout('printPage();', 3000); }); $('input').focus(function(){ //But if another input gains focus printPage won't fire clearTimeout(doPrintPage); }); }); 

The above code is pretty straightforward: after three seconds, the user leaves the input, printPage will fire. If the input receives focus in these three seconds, printPage will not be called. I really do not think that this exact code is what you need, but I will tell you how to imitate dynamism. Here you can see the definitions of setTimeout and clearTimeout .

EDIT: I hardly suggest you hide your unwanted text with CSS, as described above, and call window.print . Anyway, here I add the code for this through a new page.

Print from a new page

If you want to print from a completely different page on which you are showing, you can request this page, manage html on your server side, and then inform that the page will print immediately after loading. There are at least two ways to do this. Let's look at them step by step:

A) The first choice is to send the GridView to a new page and print it from there. The problem is that you cannot easily open a new page to do this, so you will need to switch from your page to a new one, showing your html-to-print.

A1) To do this, you need to surround the GridView with the form:

 <form runat="server"> <asp:GridView id="gridView" /> <asp:Button id="btnPrint" Text="Print" runat="server" OnClick="btnPrint_Click" /> </form> 

A2) Then from * btnPrint_Click * you will name your "printPage.aspx". Remember that if you changed your GridView using JS / jQuery, these changes may not be available (since, probably, .NET is reading a hidden state variable, not your GridView).

B) The second way to do this is through JavaScript. But remember that with this choice, it will be difficult for you if you want to edit your table on your new page (because you do not get a GridView, you get html). Good thing you can easily open a new page:

B1). Of course, you will need a form (pay attention to its purpose and action), something like:

 <form id="myPageForm" name="myPageForm" target="_blank" action="printPage.aspx"> <input type="hidden" name="htmlToPrint" id="htmlToPrint" /> <input type="button" value="submit">Print</button> </form> 

B2) Then you will need to transfer your data to this anchor. Before submitting the form, enter the data in the table:

 $(document).ready(function(){ $('#myPageForm').submit(function(){ //Filling the hidden input var htmlToPrint = $(".posGridView").html(); //I'm using a class and not an ID 'cause .NET will change your GridView ID when rendering you page $("#htmlToPrint").value(htmlToPrint); return true; }); }); 

Once you have the data on the server side (printPage.asx), you can easily create your HTML-to-print and call window.print () on this page when loading, as described above.