How to hide few columns and put logo image while get print

Question

I have grid like this :

<asp:GridView ID="GridView1" runat="server" AllowSorting="True" AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" DataKeyNames="StudentNum" DataSourceID="SqlDataSource1" Width="1314px">
    <Columns>
        <asp:CommandField ShowDeleteButton="True" ShowEditButton="True" ItemStyle-CssClass="ColVisible" HeaderStyle-CssClass="ColVisible" FooterStyle-CssClass="ColVisible"/>
        <asp:BoundField DataField="StudentNum" HeaderText="Student Number" ReadOnly="True" SortExpression="StudentNum" />
        <asp:BoundField DataField="Name" HeaderText="Name" ReadOnly="True" SortExpression="Name" />
        <asp:BoundField DataField="Surname" HeaderText="Surname" ReadOnly="True" SortExpression="Surname" />
        <asp:BoundField DataField="Degree" HeaderText="Degree" ReadOnly="True" SortExpression="Degree" />
        <asp:BoundField DataField="Average" HeaderText="Average" ReadOnly="True" SortExpression="Average" />
    </Columns>
</asp:GridView>

On print button, I wrote following:

<asp:Button ID="btnPrintCurrent" runat="server" Text="Print" 
            OnClientClick="doPrint()" />

and to print Javascript I wrote:

<script type="text/javascript">
    function doPrint() {
        var strContent = "<html><head>";
        strContent = strContent + "<title" + "></title>";
        strContent = strContent + "<link href='App_Themes/Default.css' rel='stylesheet'/>";
        strContent = strContent + "</head><body>";
        strContent = strContent + "<div style='width:100%;text-align:left;'>";
        strContent = strContent + "<img src='~/Images/bannerNMMULogo.png'/>";
        strContent = strContent + "<h1>CS Honours Project Allocation System</h1>";
        strContent = strContent + "</div>";
        var prtContent = document.getElementById('<%= GridView1.ClientID %>');

        strContent = strContent + prtContent.outerHTML;
        prtContent.border = 0; //set no border here
        var WinPrint = window.open('', '', 'left=100,top=100,width=1000,height=1000,toolbar=0,scrollbars=1,status=0,resizable=1');
        WinPrint.document.write(strContent);
        WinPrint.document.close();
        WinPrint.focus();
        WinPrint.print();
        WinPrint.close();
    }
</script>

My problems are:

I am not able to see image while print preview
I want to hide first column, <asp:CommandField>, the Delete / Edit button while print preview

score 0 · Answer 1 · edited May 23 '17 at 12:25

An asp:button provokes a callback to the backend if you press it. If you haven't backend code it's necessary that your javascript function return false to stop the callback

add return false; to the end javascript function

<script type="text/javascript">
        function doPrint() {
.....
        return false;
        }
</script>

for the second question you need to use jquery perhaps you find an solution here jQuery remove HTML table column

score 0 · Answer 2 · answered Sep 12 '13 at 03:22

Your code not simple. If you want to print just link special css print like this then your code window.print();.

I see your code just want to pop up first and then print. If you want like that, You can do simple create special page for print, add gridview without asp command field and attach link css print. And then your code should like this:

function doPrint() {
    var WinPrint = window.open('pageprint.aspx', '', 'left=100,top=100,width=1000,height=1000,toolbar=0,scrollbars=1,status=0,resizable=1');
    WinPrint.focus();
    WinPrint.print();
    WinPrint.close();
}

I hope this help you.

How to hide few columns and put logo image while get print

2 Answers2