Question

I have the data in the following format:

(Dummy Entries)(id=posGridView)

As I process the sale, a small receipt print automatically with selected columns, not all the columns.

Because all data is available in this grid view, How can I print it dynamically with any format with jquery?

Edited

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

Answer 1

Printing

There’s no need for jQuery for printing a page, you just need the JavaScript function: window.print();.

If you need to print an specific content, you can hide the rest (and format the printed area) by 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 set up styles for both the normal view (screen) and the printing view (print). Full article is here.

Dynamism

You can add certain dynamism to the process, but keep in mind that it can be dinamically for the user, but in your code you’ll have to find and event to attach the printing. That event could be a click in an anchor:

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

It could be the onload event of your page:

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

Or any other event that you might need to be aware (notice that now I’m using jQuery):

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 code above is pretty straight-forward: after three seconds of the user leaving an input, printPage will fire. If an input get the focus in those three seconds, printPage won’t be called. I don’t really think this precise code is what you need, but I’ll make the point how to emulate dynamism. Here can see the setTimeout and clearTimeout definitions.

EDIT: I hardly suggest you to hide your unwanted-to-print html through CSS as explained above and call window.print. Anyway, here I’m adding some code for doing it through a new page.

Printing from a brand new page

If you want to print from a totally different page that the one you’re showing, you can ask for that page, manage the html in your server-side and then tell the page to print as soon as get loaded. There’s at least two ways to do this. Let see them step by step:

A) The first choice is to send your GridView to your new page and print it from there. The problem is that you can’t easily open a new page to do this, so you’ll have to browse from your page to a new one showing your html-to-print.

A1) For this, you need to surround your GridView with a 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’ll call your “printPage.aspx”. Remember that if you changed your GridView with JS/jQuery, those changes could be not available (since it’s likely that .NET reads a hidden state variable rather than your GridView).

B) The second way to do it is through JavaScript. But remember that with this choice you’ll have a hard time if you want to edit your table in your new page (because you won’t be receiving a GridView, you’ll receiving html). The good thing is that you can easily open a new page:

B1) Off course, you’ll need a form (notice its target 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’ll have to pass your data to that anchor. Before submitting the form, set the input with your table data:

$(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's ID when rendering you page
        $("#htmlToPrint").value(htmlToPrint);
        return true;
    });
});

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