CODEWITHSUNDEEP
javascripthtmlasp.netbootstrap-modal
Will Tran
Will Tran

Reputation: 41

Printing a Modal with a Gridview + Formatting

Hello so I'm trying to Print out a modal with all of the data in the modal but I'm running into a problem with formatting. The Gridview get's cut off and the text are not the way it should be. Any advice on how to make it look better?

enter image description here enter image description here

    <script type="text/javascript">
    function PrintContent() {

        var panel = document.getElementById("SummaryModal");
        var printWindow = window.open('', '', 'height=400,width=800');
        printWindow.document.write('<html><head><title>Trip Summary</title>');
        printWindow.document.write('</head><body >');
        printWindow.document.write(panel.innerHTML);
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        setTimeout(function () {
            printWindow.print();
        }, 500);
        return false;
    }
</script>

<div id="SummaryModal" class="modal fade" role="dialog">
                <div class="modal-dialog" style="width: 80%">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4>Trip Summary</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="lblDate">Date:</label>
                                        <div class="input-group" style="width: 100%">
                                            <asp:Label runat="server" ID="lblDate"></asp:Label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="lblVolunteer">Volunteer Assigned:</label>
                                        <div class="input-group" style="width: 100%">
                                            <asp:Label runat="server" ID="lblVolunteer"></asp:Label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="lblStartingAddress">Starting Address:</label>
                                        <div class="input-group" style="width: 100%">
                                            <asp:Label runat="server" ID="lblStartingAddress"></asp:Label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="lblNumBoxes">Number Of Boxes:</label>
                                        <div class="input-group" style="width: 100%">
                                            <asp:Label runat="server" ID="lblNumBoxes"></asp:Label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="lblHasFood">Trip has food?</label>
                                        <div class="input-group" style="width: 100%">
                                            <asp:Label runat="server" ID="lblHasFood"></asp:Label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="lblTotalTripTime">Total Trip Time:</label>
                                        <div class="input-group" style="width: 100%">
                                            <asp:Label runat="server" ID="lblTotalTripTime"> 2 hours and 30 minutes </asp:Label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="GVSummary">List of Destinations:</label>
                                    </div>
                                </div>
                                <div class="col-md-3 col-md-offset-9">
                                    <a href="#" id="btnPrint" class="btn btn-success btn-sm pull-right">
                                        <span style="width: 3.5em;" onclick="PrintContent()" title="Print Trip Summary" data-toggle="tooltip" class="glyphicon glyphicon-print"></span>Print Summary


                                        <%--<asp:LinkButton
                                            Style="width: 3.5em;" OnClick="btnPrint1_Click" runat="server" title="Print Trip Summary" data-toggle="tooltip" class="glyphicon glyphicon-print">Print Summary
                                        </asp:LinkButton>--%>
                                    </a>

                                </div>
                            </div>
                            <br />

                            <div class="row">
                                <div class="container-fluid">

                                    <div style="overflow-x: scroll; overflow-y: scroll">
                                        <asp:GridView ID="GVSummary" runat="server" Style="overflow-x: scroll; overflow-y: scroll" CssClass="table table-responsive table-bordered" AutoGenerateColumns="false">
                                            <Columns>
                                                <asp:BoundField DataField="DestName" HeaderText="Name" />
                                                <asp:BoundField DataField="isPickup" HeaderText="Pick Up or Delivery" />
                                                <asp:BoundField DataField="Address1" HeaderText="Address 1" />
                                                <asp:BoundField DataField="Address2" HeaderText="Address 2" />
                                                <asp:BoundField DataField="City" HeaderText="City" />
                                                <asp:BoundField DataField="State" HeaderText="State" />
                                                <asp:BoundField DataField="ZipCode" HeaderText="Zip Code" />
                                                <asp:BoundField DataField="RegionName" HeaderText="Region" />
                                                <asp:BoundField DataField="DestinationPriority" HeaderText="Priority" />
                                                <asp:BoundField DataField="DesTime" HeaderText="Travel Time" />
                                                <asp:BoundField DataField="isScheduled" HeaderText="Recurring" />
                                                <asp:BoundField DataField="DesNotes" HeaderText="Notes" />
                                                <%-- <asp:BoundField DataField="DesNotes" HeaderText="Notes" />
                                                <asp:BoundField DataField="isFood" HeaderText="Notes" />
                                                <asp:BoundField DataField="BoxesNumber" HeaderText="Notes" />
                                                <asp:BoundField DataField="DesTime" HeaderText="Notes" />
                                                <asp:BoundField DataField="DesNotes" HeaderText="Notes" />
                                                <asp:BoundField DataField="DesNotes" HeaderText="Notes" />--%>
                                            </Columns>
                                        </asp:GridView>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 181

Answers (1)

Nekud
Nekud

Reputation: 11

You can use CSS on the printwindow page with the following line:

printWindow.document.write('<link href="/css/style.css" rel="stylesheet" />');

Use whatever CSS you used for the page.

Upvotes: 1

Related Questions