Reputation: 1838

Printing a Gridview - how to print n rows on each page using page break

I have a gridview with 30 rows.I want to print it in 3 pages with 10 rows each.I have tried this code.

        foreach (GridViewRow row in GridView1.Rows)
        {
            if (row.RowIndex % 10 == 0 && row.RowIndex != 0)
            {
                row.Attributes["style"] = "page-break-after:always;";
            }
        }

But it prints the whole page without any page breaks.I used to call print function using javascript(shown below).

    function PrintGridData() {
        var prtGrid = document.getElementById('<%=GridView1.ClientID %>');
        prtGrid.border = 0;
        //GridView1.Attributes(style) = "page-break-after:always"         
        var prtwin = window.open('', 'PrintGridViewData', 'left=100,top=100,width=1000,height=1000,tollbar=0,scrollbars=1,status=0,resizable=1');
        prtwin.document.write(prtGrid.outerHTML);
        prtwin.document.close();
        prtwin.focus();
        prtwin.print();
        prtwin.close();
    }

Help???

Regards...

I am showing my complete markup below..pls check it..

<%@ Page Title="About Us" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="About.aspx.cs" Inherits="WebApplication2.About" EnableEventValidation="false" %>

<%@ Register assembly="Shared.WebControls" namespace="Shared.WebControls" tagprefix="cc1" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        About
    </h2>
    <script type="text/javascript">

        function PrintGridData() {
            var prtGrid = document.getElementById('<%=ReportGridView1.ClientID %>');

                //window.print();
            prtGrid.border = 0;
            //GridView1.Attributes(style) = "page-break-after:always"         
            var prtwin = window.open('', 'PrintGridViewData', 'left=100,top=100,width=1000,height=1000,tollbar=0,scrollbars=1,status=0,resizable=1');
            prtwin.document.write(prtGrid.outerHTML);
            prtwin.document.close();
            prtwin.focus();
            prtwin.print();
            prtwin.close();
        }
</script>
   <p>
        <asp:Button ID="Button1" runat="server" Text="Button" 
             onclick="Button1_Click" OnClientClick="PrintGridData()"/>
&nbsp;<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" 
            CellPadding="4" DataKeyNames="ID" DataMember="DefaultView" 
            ForeColor="Black" GridLines="None" 
            ShowFooter="True" style="margin-left: 0px; margin-right: 0px; margin-top: 3px;" 
            Width="965px" 
            ShowHeaderWhenEmpty="True" 
            EnableTheming="True" onrowcreated="GridView1_RowCreated" 
            onrowdatabound="GridView1_RowDataBound">
            <AlternatingRowStyle BackColor="White" BorderStyle="Solid" />
            <Columns>
                <asp:TemplateField ConvertEmptyStringToNull="False" HeaderText="Select">
                    <ItemTemplate>
                        <asp:CheckBox ID="chkrow" runat="server" AutoPostBack="True" 
                            TabIndex="1" ToolTip="Select" />
                    </ItemTemplate>
                    <HeaderTemplate>
                        <asp:CheckBox ID="chkhead" runat="server" />
                    </HeaderTemplate>
                </asp:TemplateField>
                <asp:CommandField ButtonType="Button" HeaderText="Edit" ShowEditButton="True">
                <ControlStyle CssClass="classname" />
                </asp:CommandField>
                <asp:TemplateField HeaderText="First Name">
                    <ItemTemplate>
                        <asp:Label ID="lblfirstname" runat="server" Text='<%# Eval("First_name") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txteditfirstname" runat="server" 
                            Text='<%# Eval("First_name") %>'></asp:TextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Second Name">
                    <ItemTemplate>
                        <asp:Label ID="lblsecondname" runat="server" Text='<%# Eval("Second_name") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txteditsecondname" runat="server" 
                            Text='<%# Eval("Second_name") %>'></asp:TextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="DOB">
                    <ItemTemplate>
                        <asp:Label ID="lbldob" runat="server" Text='<%# Eval("DOB") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txteditdob" runat="server" Text='<%# Eval("DOB") %>'></asp:TextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Address">
                    <ItemTemplate>
                        <asp:Label ID="lbladdress" runat="server" Text='<%# Eval("Address") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txteditaddress" runat="server" Text='<%# Eval("Address") %>'></asp:TextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="PIN">
                    <EditItemTemplate>
                        <asp:TextBox ID="txteditpin" runat="server" Text='<%# Eval("PIN") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="lblpin" runat="server" Text='<%# Eval("PIN") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Contact No">
                    <ItemTemplate>
                        <asp:Label ID="lblcontactno" runat="server" Text='<%# Eval("Contact_no") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txteditcontactno" runat="server" 
                            Text='<%# Eval("Contact_no") %>'></asp:TextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="E-mail">
                    <ItemTemplate>
                        <asp:Label ID="lblemail" runat="server" Text='<%# Eval("E_mail")%>'></asp:Label>
                    </ItemTemplate>

                    <EditItemTemplate>
                        <asp:TextBox ID="txteditemail" runat="server" Text='<%# Eval("E_mail") %>'></asp:TextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
            </Columns>
            <FooterStyle BackColor="#CCCC99" />
            <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
            <PagerSettings Visible="False" />
            <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
            <RowStyle BackColor="#F7F7DE" />
            <SelectedRowStyle BackColor="#CE5D5A" CssClass="SelectedRowStyle" 
                Font-Bold="True" ForeColor="White" />
            <SortedAscendingCellStyle BackColor="#FBFBF2" BorderStyle="Double" />
            <SortedAscendingHeaderStyle BackColor="#848384" />
            <SortedDescendingCellStyle BackColor="#EAEAD3" />
            <SortedDescendingHeaderStyle BackColor="#575357" />
        </asp:GridView>
</p>

Help???

Upvotes: 0

Answers (2)

Jameem

Reputation: 1838

if (!IsPostBack)
        {
            var sb = new StringBuilder();
            string s;
            show();
            for (int i = 0; i < GridView1.PageCount; i++)
            {
                GridView1.FooterRow.Visible = false;
                GridView1.PageIndex = i + 1;
                sb.Clear();
                GridView1.RenderControl(new HtmlTextWriter(new StringWriter(sb)));
                s = sb.ToString();               
                Response.Write(s);
                if (i != GridView1.PageCount - 1)
                {
                    Response.Write("<p></p>");
                }
                show();
            }
            GridView1.Visible = false;
        }

 public override void VerifyRenderingInServerForm(Control control)
 {

 }



I have used this method to solve the case..I have applied paging to the **gridview** and it works!!!

Upvotes: 1

surfmuggle

Reputation: 5942

CSS page-break-after not working cross browser

I tested page-break-after: always; with ie10 and firefox 22 - it works in both; in Chrome 30 it does not work. So its difficult to tell why it does not work for you in firefox 22.

If your user base is mostly IE and firefox (like in our company). This will work:

.pagebreak {
    page-break-after: always;
}

Apparently the support for css pagebreak is not ideal:

A search for chrome issues lead me to issue 99124 - Printed table content does not respect page-break CSS properties; reported on Oct 4, 2011 and still untriaged: Confirmed, not reviewed for priority and assignment. It seems that printing is just not important.

Adding this css did not help either:

@media print
{
table tr.pagebreak {page-break-after:always}
}

Updated - a patchy workaround using Javascript

A workaround could be to split the table up to many tables - for each page. This demo breaks a single table into n tables after the user clicks the button. You need this css hr {page-break-after: always;} as well.

I updated the javascript to include a <hr /> between each page to even force chrome to add a page break.

function printTable(){
    var tables = createTables(2);
    $("#printTables").html(tables); 
}       

function createTables(rowsPerTable){            
    var rowsInParentTable  = $( "tbody tr" ).toArray();                 
    var subTable = "<table>", subRows=[], sr = 0;           
    for(i=0; i < rowsInParentTable.length; i++){                
       subTable += "<tr>" + rowsInParentTable[i].innerHTML + "</tr>";
       if( i % rowsPerTable === 0 && (i > rowsPerTable || i +1 > rowsPerTable ){
        subTable += "</table> <hr /><table>";
       }
    }
    return subTable;
}

And the html

   <div>
     <table id="sourceTable">
       <tbody>
        <tr><td>1 Browser</td>
                <td>Version</td>
                <td>Support for 'page-break-after' </td></tr>
        <tr><td>2 Internet Explorer</td>
                <td>10</td><td>works for table rows</td></tr>
        <tr><td>3 Fire Fox</td><td>22</td>
                <td>works for table rows</td></tr>
            <tr><td>4 Chrome</td><td>30</td>
                <td>does not work</td></tr>
        <tr><td>5 Safari</td><td>?</td><td>?</td></tr>
        <tr><td>6 Opera</td><td>?</td><td>?</td></tr>
      </tbody>
     </table>
     <button onclick="printTable()">print table</button>
    </div>
    <div id="printTables">
    </div>

My recomendation

I would create a seperate aspx-page that takes care of the printing page. This way you would have full server side control and can use a repeater to create exactly the html output you need.