Results 1 to 3 of 3

Thread: Using HTML 5 W/.Net Code; Is There a "one-fit" way to print grid views?

Hybrid View

  1. #1
    Join Date
    Apr 2014

    Using HTML 5 W/.Net Code; Is There a "one-fit" way to print grid views?

    Hi all,

    I'm developing my first HTML 5 application, and it's my first web app in quite some time. I was excited to start using HTML 5 because I was under the impression that it used a lot of "generic" components that was universally accepted across platforms and browsers. I still seem to be running into issues though. My latest one includes printing a gridview. I'm just looking for a solution that will work across multiple browsers, to print gridviews with page breaks and headers that carry from page to page. I found this javascript code below, and when testing it against Chrome and Internet Explorer, it produces two different results:

    I'm using the following css:
    HTML Code:
        <style type="text/css">
                padding: 10px;
                background-color: #1C3A70;
                color: White;
                text-align: center;
            @media print
                    display : table-header-group;    
                    border:solid 1px #000000;
    When a user clicks on my print image, this javascript gets called:

    HTML Code:
        <script type="text/javascript">
            // Repeate the table header on each page ...
            function AddTHEAD(tableName) {
                var table = document.getElementById(tableName);
                if (table != null) {
                    var head = document.createElement("THEAD");
                    head.style.display = "table-header-group";
                    table.insertBefore(head, table.childNodes[0]);
    Also, I'm calling this C# codebehind method OnRowDataBound:

            protected void ChangeVarianceColor(object sender, GridViewRowEventArgs e)
                if ( e.Row.RowType == DataControlRowType.DataRow)
                    //Insert a Page Break after every 20th row
                    if (e.Row.RowIndex % 20 == 0)
                        e.Row.Attributes.Add("style", @"page-break-after:always;");
    So all this together will create a page break every 20 records and print out the header row before printing the next 20 records. In Internet Explorer, it works exactly as it should; but when I run it in Chrome, the Print Preview pops up, and it ignores the page break and reprinting of headers and just runs off one page and onto the next. I haven't even attempted it in Safari yet .

    So my question is, am I not fully grasping the power of HTML 5, or unfortunately are the browsers still so far apart in the way they perform, that there is no "one-fit" solution?

  2. #2
    Join Date
    Mar 2011
    It's not your code, or anything to do with HTML 5. The CSS 'page-break' properties are in CSS2.

    Unfortunately, problems with 'page-break-after' and 'page-break-inside' are a known bug in Chrome. And since Chrome and Safari share a lot of code, you may have trouble in both of them. If you do some searching, you might find suggested work-arounds. But in the end, I think you're going to have to generate separate <table>s for each 'page' to get this to work everywhere.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Apr 2014
    Thanks so much for the quick response, and for confirming the 'epiphany' I had this morning. I'm trying to get away from using proprietary coding as much as possible, and it dawned on me that gridviews are a Microsoft/asp.net 'thing'. I don't think I need to go as extreme as rewriting all my gridviews into tables...but it sounds like it would be a huge advantage to do this for the ones that need to be printed...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center

Recent Articles