javascript - 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 plete 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???

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 plete 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???

Share Improve this question edited Aug 3, 2013 at 13:48 surfmuggle 5,9748 gold badges56 silver badges92 bronze badges asked Aug 3, 2013 at 6:08 Jameem 1,8383 gold badges15 silver badges26 bronze badges

Could you clarify what Gridview you mean. Are you using the asp system.web.ui.webcontrols.gridview? – surfmuggle Commented Aug 3, 2013 at 7:55
Thanks,bro..I figured it out using a different method... – Jameem Commented Aug 14, 2013 at 12:53
You could add your own answer so others can benefit from your experience. – surfmuggle Commented Aug 16, 2013 at 19:02

Add a ment |

2 Answers 2

Sorted by: Reset to default 1

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 pany). This will work:

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

Apparently the support for css pagebreak is not ideal:

pagebreak does not work in chrome or
pagebreak not working in all browsers

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 reendation

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.

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!!!

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745305684a4621695.html

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

2 Answers 2

CSS page-break-after not working cross browser

Updated - a patchy workaround using Javascript

My reendation

发表回复

评论列表（0条）

联系我们

400-800-8888

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

2 Answers 2

CSS page-break-after not working cross browser

Updated - a patchy workaround using Javascript

My reendation

相关推荐