How to print repeater data using Ctrl+P?

Question

<asp:Repeater ID="RptStock" runat="server" OnItemCommand="RptStock_ItemCommand">
    <ItemTemplate>
        <tr class="spacer"></tr>
        <tr class="tr-shadow text-center">
            <td><%# (Container.ItemIndex + 1).ToString() %></td>
            <td>
                <asp:Label ID="lblSKU" runat="server" Text='<%# Bind("Product_SKU") %>' CssClass="form-control-label"></asp:Label>
            </td>
            <td>
                <asp:Label ID="lblQuantity" runat="server" Text='<%# Bind("Product_Quantity") %>' CssClass="form-control-label"></asp:Label>
            </td>
            <td>
                <asp:Label ID="lblSold" runat="server" Text='<%# Bind("Sold") %>' CssClass="form-control-label"></asp:Label>
            </td>
            <td>
                <asp:Label ID="lblLeft" runat="server" Text='<%# Bind("Remaining") %>' CssClass="form-control-label"></asp:Label>
            </td>
       </tr>
   </ItemTemplate>
</asp:Repeater>

I want to print the data binded in repeater using Ctrl+P command. Secondly, if a repeater has 5 columns can we print only 4 columns?

function printDiv(printdivcontent) {
        var printContents = document.getElementById(printdivcontent).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        $('td:nth-child(8), th:nth-child(8), td:nth-child(7)').hide();
        $('td:nth-child(9),th:nth-child(9)').hide();
        $('td:nth-child(10),th:nth-child(10)').hide();
        $('td:nth-child(11),th:nth-child(11)').hide();
        $('td:nth-child(12),th:nth-child(12)').hide();
        window.print();
        document.body.innerHTML = originalContents;

I tried this code but when i closes the print dialog parent page buttons does not work. But then if i refresh the page, buttons start working. Why?

Ahsan Goheer · Answer 1 · 2020-07-29T13:58:37.957

0

You can use Javascript to print the contents of the page. Here's the answer to a similar query (https://stackoverflow.com/a/18442010/9305527).If you want to print a specific portion of your page then the following tutorial might be helpful Print a specific div using Javascript.

Assuming that you don't want to print the last column.Try This:

function printColumns()
{  
    var col1=document.querySelectorAll("#lblSKU");
    var col2=document.querySelectorAll("#lblQuantity");
    var col3=document.querySelectorAll("#lblSold");
    var printWindow = window.open('', '', 'height=500,width=500');  
    printWindow.document.write('<html><head><title>Table Content</title>');  
    printWindow.document.write('</head><body >');
    for(var i=0;i<col1.length;i++)
    {
    printWindow.document.write("<label>Label 1:"+col1[i].innerText+"<label></br>");
    printWindow.document.write("<label>Label 2:"+col2[i].innerText+"<label></br>");
    printWindow.document.write("<label>Label 3:"+col3[i].innerText+"<label></br>");  
    }
    printWindow.document.write('</body></html>');  
    printWindow.document.close();  
    printWindow.print();
}

Add a print button and attach this function to the onClick property.

edited Jul 29 '20 at 13:58

answered Jul 29 '20 at 12:44

Ahsan Goheer

669
6
9

I checked both options. Windows.print() command not only gets repeater data but also the search bar above repeater. Whereas specific div shows all records on single page with disturbed alignment. And i can't see any option to skip 1 column. How can i skip the column? – Urwah Jul 29 '20 at 13:21
I added a code example to my initial answer. Hopefully it will work as per your requirement. – Ahsan Goheer Jul 29 '20 at 13:59
1

Thank you for your help.I'm not so fimiliar with jquery so i was facing trouble to use above code according to asp.net. I searched and found this way toh hide a column in jquery. $('td:nth-child(8),th:nth-child(8)').hide(); – Urwah Jul 29 '20 at 14:45
That's great. Glad to be of help. – Ahsan Goheer Jul 29 '20 at 14:47

How to print repeater data using Ctrl+P?

1 Answers1