Create print from a gridview where each record is on a separate page

Question

Not sure where to start on this request I received. I have exported data from gridviews to excel and word. Passed CSS stylesheets to both, created various prints from a gridview. This one has me stumped on where to start. Intially thought I could create individial datasheets from the selected rows of the gridview and generate the printable report.

Basically here is what I need to do. I have a girdview that displays some records. The users needs to select whatever rows they want to print via a checkbox and select a print button. One the button is presses a popup window would display the details of each record one page at a time.

Here is the gridview:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
    BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" 
    CellPadding="5" CellSpacing="1"
    DataSourceID="SqlDataSource1" ForeColor="Black" GridLines="Vertical" AllowSorting="True">
    <FooterStyle BackColor="#CCCCCC" />
    <Columns>

        <asp:TemplateField HeaderText="Process">
            <ItemTemplate>
                <asp:CheckBox runat="server" ID="chkSelect"  />
                <asp:HiddenField ID="hdnPkey" Value='<%# Bind("Pkey") %>' runat="server" />
            </ItemTemplate>
            <HeaderTemplate>
                <input id="chkAll" onclick="javascript:SelectAllCheckboxes(this, 'chkSelect');" runat="server" type="checkbox" />
            </HeaderTemplate>
            <HeaderStyle HorizontalAlign="Center" />
            <ItemStyle HorizontalAlign="Center" />
        </asp:TemplateField>


        <asp:BoundField DataField="CreatedBy" HeaderText="Requestor" SortExpression="CreatedBy">
            <HeaderStyle HorizontalAlign="left" />
            <ItemStyle HorizontalAlign="left" />
        </asp:BoundField>

        <asp:BoundField DataField="Office" HeaderText="Office" SortExpression="Office">
            <HeaderStyle HorizontalAlign="center" />
            <ItemStyle HorizontalAlign="center" />
        </asp:BoundField>

        <asp:BoundField DataField="DeptCode" HeaderText="Department" SortExpression="DeptCode">
            <HeaderStyle HorizontalAlign="Left" />
            <ItemStyle HorizontalAlign="Left" />
        </asp:BoundField>

        <asp:BoundField DataField="ZoneName" HeaderText="Zone" SortExpression="ZoneName">
            <HeaderStyle HorizontalAlign="Left" />
            <ItemStyle HorizontalAlign="Left" />
        </asp:BoundField>

        <asp:BoundField DataField="EffectiveDate" HeaderText="Effective Date" DataFormatString = "{0:d}"  SortExpression="EffectiveDate">
            <HeaderStyle HorizontalAlign="center" />
            <ItemStyle HorizontalAlign="center" />
        </asp:BoundField>

    </Columns>
    <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
    <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
    <HeaderStyle BackColor="Silver" Font-Bold="True" ForeColor="Black" />
    <AlternatingRowStyle BackColor="#CCCCCC" />
</asp:GridView>

* Here is the javascript on the clientside I use to validate to make sure a checkbox is checked. I cannot fiugure out how to capture the primary key that is in a hiddenfield and build a string where each primary key value is separated by a comma. I was going to take that string and pop open a new window to retrieve the data.

---

    function fcnValidateCheckBoxes() {

        var isValid = false;
        var gridView = document.getElementById("<%=GridView1.ClientID %>");
        var MyPkeyString = ""

        for (var i = 1; i < gridView.rows.length; i++) {
            var inputs = gridView.rows[i].getElementsByTagName('input');
            if (inputs != null) {
                if (inputs[0].type == "checkbox") {
                    if (inputs[0].checked) {
                        isValid = true;
                        return true;
                    }
                }
            }
        }


        if (isValid == "true") {
           ***** Not sure what goes here to build the string of primary keyes. **
        } else {
            alert("You must select at least one checkbox");
            return false;
        }
    }

Answer 1

There are many ways to get the hidden field's value. Since you already have the loop, I decided to add a couple of lines to get the primary key of each row with a checked checkbox. I assume that the hidden field is the next input field after the checkbox:

var primaryKeys = '';
for (var i = 1; i < gridView.rows.length; i++) {
    var inputs = gridView.rows[i].getElementsByTagName('input');
    if (inputs != null) {
        if (inputs[0].type == "checkbox") {
            if (inputs[0].checked) {
                if(inputs.length > 1 && inputs[1].type == "hidden")
                {
                    primaryKeys += inputs[1].value + ';';
                }
            }
        }
    }
}

Now you have a list of all the relevant primary keys separated by semicolons, you just need to pass it to the next page. I'm not sure how you want to do this (you only said that you wanted a popup), so here's a quick example with window.open and a GET request:

window.open('Print.aspx?ids=' + encodeURIComponent(primaryKeys));

And in code behind:

string params = Request.Querystring("ids");
string[] ids = params.split(';');

Answer 2

Use that Jquery code for Page breaking of Selected Record.

$(document).ready(function () {
        $("#btnPrint").live("click", function (e) {
            $('#tblFinal').append('<tr>' + $('#GridView1 tr:eq(0)').html() + '</tr>');
            $('#GridView1 tr [type="checkbox"]').each(function (index) {
                if ($(this).is(":checked")) {
                    $('#tblFinal').append('<tr>' + $('#GridView1 tr:eq(' + index + ')').html() + '</tr>');
                    $(this).attr('checked', false);
                }
            });
            $('#tblFinal tr').append('<p style="page-break-after: always"></tr>');
            printDiv();
        });
    });

    function printDiv() {
        var divToPrint = document.getElementById('tblFinal');
        newWin = window.open("");
        newWin.document.write(divToPrint.outerHTML);           
        newWin.print();
        newWin.close();
    }

take blank table in aspx page.

<table id="tblFinal">
    </table>

Hope it helps you.

Answer 3

In your module that fills the popup insert the following between the content

This is the text for page #1.

<p style="page-break-before: always">

Page #2...

<p style="page-break-before: always">

Page #3...