Printing A Gridview - How To Print N Rows On Each Page Using Page Break

February 02, 2024 Post a Comment

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

Solution 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 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
{
tabletr.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.

Baca Juga

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

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

functioncreateTables(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><tableid="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><buttononclick="printTable()">print table</button></div><divid="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.

Solution 2:

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;
        }

 publicoverridevoidVerifyRenderingInServerForm(Control control)
 {

 }



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

JavaScript Apprenticeships