views:

138

answers:

2

I am printing out a Gridview along with a Title. I don't print anything else on the page. That works fine. However I have a cell that is a template field that i do not want to Print. How can I exclude that cell? Here is some code that I have.

<div id="Printmeonly" align="center">
<table width="100%">
    <tr id="trtitle" style="display:none">
        <td style="color:Blue;font-size:large" align="center" colspan="2"><strong>Incident # <%=Request.QueryString["Inc"].ToString() %> Notes (Store <%=Request.QueryString["Loc"].ToString() %>)</strong><br /><br /></td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
                BackColor="White" BorderColor="#999999" BorderStyle="None" BorderWidth="1px" 
                CellPadding="3"
                DataSourceID="SqlDataSource" ShowFooter="True">
                <RowStyle BackColor="#EEEEEE" ForeColor="Black" />
                <Columns>
                     <asp:BoundField DataField="Somefield" HeaderText="Somefield" 
                         SortExpression="Somefield" Visible="False" />
                     <asp:TemplateField ShowHeader="True" HeaderText="Action" ItemStyle-CssClass="dontPrint"  ControlStyle-CssClass="dontPrint" HeaderStyle-CssClass="dontPrint" FooterStyle-CssClass="dontPrint">
                     <ItemTemplate>
                         <asp:ImageButton ID="bttneditNote" ImageUrl="~/images/bttnEdit.gif" style="cursor:pointer" runat="server" CausesValidation="False" 
                             CommandName="Edit" Text="Edit"></asp:ImageButton>
                        <asp:ImageButton ID="bttndeleteNote" ImageUrl="~/images/bttnDelete.gif" OnClientClick="if(confirm('Are you sure you want to delete this Application?')==false) return false;" style="cursor:pointer" runat="server" CausesValidation="False" 
                             CommandName="Delete" Text="Delete"></asp:ImageButton>
                     </ItemTemplate>
                     <EditItemTemplate>
                          <asp:ImageButton ID="bttnEditNote" ImageUrl="~/images/bttnSave.gif" style="cursor:pointer" runat="server" CausesValidation="False" 
                             CommandName="Update" Text="Update"></asp:ImageButton>
                         &nbsp; <asp:ImageButton ID="bttnCancelNote" ImageUrl="~/images/bttnCancel.gif" style="cursor:pointer" runat="server" CausesValidation="False" 
                             CommandName="Cancel" Text="Cancel"></asp:ImageButton>
                     </EditItemTemplate>
                 </asp:TemplateField>
                </Columns>
                <FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
                <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
                <SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
                <HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
                <AlternatingRowStyle BackColor="#DCDCDC" />
            </asp:GridView>
         </td>
    </tr>
 </table>
 </div>
  <table>
<tr>
    <td align="center" colspan="2"><br />
        <asp:ImageButton ID="bttnprint" runat="server" OnClientClick="CallPrint('Printmeonly');" ImageUrl="~/somefolder/images/PrintButton.gif" style="cursor:pointer" />
    </td>
</tr>

<script type="text/javascript">

function CallPrint(strid) {
    var trtitle = document.getElementById('trtitle');
    trtitle.style.display = '';
    var prtContent = document.getElementById(strid);
    var WinPrint = window.open('', '', 'left=0,top=0,width=1,height=1,toolbar=1,scrollbars=1,status=1');
    WinPrint.document.write(prtContent.innerHTML);
    WinPrint.document.close();
    WinPrint.focus();
    WinPrint.print();
    WinPrint.close();
}
</script>

So on print I sent the javascript function a div tag id and print just that. How can I remove that one field just for the print? Any ideas are welcome.

Edited I edited the markup. the template field consisting of the buttons is the field i want to hide.

+4  A: 

Have you tried a CSS approach:

<style type="text/css">
    @media print {
      .dontPrint { display: none; }
    }
  </style>

Then apply that class to the cell. I can't give you a more comprehensive example as I don't know what you wish to actually exclude (it is not clear from your question). For more options, take a look here.

Edit:

I've found some time to knock up a complete tested example (I tested it by printing to an XPS document to save trees). The ASPX:

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
    <title></title>
    <style type="text/css">   
         @media print       
         {
            .dontPrint { display: none; }    
         }  
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:GridView ID="grdHideOnPrint" runat="server">
        <Columns>
            <asp:BoundField DataField="Test" />
            <asp:TemplateField ControlStyle-CssClass="dontPrint">
                <ItemTemplate>
                    <asp:Button Text="Hide On Print"  runat="server" ID="btnHideOnPrint" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    </div>
    </form>
</body>
</html>

The code behind:

public partial class _Default : System.Web.UI.Page 
{
    public class Testing
    {
        public string Test { get; set;}
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        List<Testing> data = new List<Testing>() 
        {
            new Testing() { Test = "This should print" }
        };

        grdHideOnPrint.DataSource = data;
        grdHideOnPrint.DataBind();
    }
}

It should now be clear how you can adapt this to your code.

RichardOD
No. Can you elaborate? I'm not sure i understand.
Eric
@Eric You can specify that certain CSS rules only get applied to certain media - print, screen, etc - in this case RichardOD is saying that when the HTML is sent to the printer, anything with the style ".dontPrint" applied to it should not be displayed.
Zhaph - Ben Duguid
OK- please update your answer first and more clearly highlight the bit you wish to exclude.
RichardOD
This approach works great. We used it for printing a "copy" of a receipt in an app by having a second div that was just a clone of the first with the appropriate @media tags.
Nicolas Webb
The `@media print` part indicates that the css styles inside should only be applied when the page is printed - so any any element with the dontPrint style will be set to display: none when printed.
David
Richard, I made it hopefully more clear.
Eric
@Eric- I've added a complete example now.
RichardOD
A: 

Could you just set display:none on the element you want to remove...in the javascript you're already using before the print statement?

Edit to add: if it's a server-side control you have the ClientID property--but you may end up having some issues with WHEN in the event chain you check the ClientID.

Broam
I don't know how because a template field does not have an id to access in javascript.
Eric
i used this. but I was forced to create a second Gridview with the same datasource. Works fine.
Eric