[Solved] GridView getting squished while printing in JavaScript

anjali600
 
on Sep 19, 2021 10:47 PM
759 Views

I am trying to print the GridView using JavaScript. GridView looks really nice on the web page, but when I try to print out the GridView, it gets squished. I can even see the outline of squished GridView. Below is the image of the GridView in the print out:

as you can see the outline of the GridView after $14.00. The lighter outline after $14.00 is the entire GridView but in printout, it got squished and this outline entire outline shows in the printout too. Below is the code for the printout:

<script>
    function printContent(el) {
           var restorepage = $('body').html();
           document.getElementById('<%=lblDateTime.ClientID %>').style.display = "block";
           document.getElementById('<%=lblDateTime.ClientID %>').innerHTML = 'Current Date Time: ' + new Date().toLocaleString();
           document.getElementById('<%=acrLogo.ClientID %>').style.display = "block";
           document.getElementById('<%=compName.ClientID %>').style.display = "block";
           var printcontent = $('#' + el).clone();
           printcontent.removeAttr('style');
           $('body').empty().attr('style', 'background-color: white;').html(printcontent);
           $('body').empty().html(printcontent);
           window.print();
           $('body').html(restorepage);
    }
</script>

How can I expand the gridview all the way to the line so that it doesn't get squished in the print out. below is the code of the gridview:

<div class="container">
    <div class="row justify-content-center">
        <div class="col-sm-6">
            <asp:GridView ID="grdCalculate" runat="server" GridLines="Horizontal" CssClass="table table-responsive table-hover table-striped table-bordered table-condensed" OnRowDataBound="grdCalculate_RowDataBound">
            </asp:GridView>
        </div>
    </div>
</div>

any help will be highly appreciated.

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Sep 20, 2021 05:33 AM
on Sep 21, 2021 02:20 AM

Refer below code.

HTML

MasterPage

<html>
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
        integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body style="background-color: blueviolet;">
    <form id="form1" runat="server">
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

ContentPage

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <script type="text/javascript"> 
        function printContent(el) {
            var restorepage = $('body').html();
            var printcontent = $('[id*=' + el + ']').clone();
            printcontent[0].innerHTML = '<style type="text/css">.table-responsive {display: inline-table !important;}</style>' + printcontent[0].innerHTML;
            $('body').empty().attr('style', 'background-color: white;').html(printcontent);
            window.print();
            $('body').attr('style', 'background-color: blueviolet;').html(restorepage);
        }
    </script>
    <style type="text/css">
        .table-responsive {
            display: inline-table !important;
        }
    </style>
    <div class="container" id="test">
        <div class="row justify-content-center">
            <div class="col-sm-6">
                <asp:GridView ID="grdCalculate" runat="server" GridLines="Horizontal"
                    CssClass="table table-responsive table-hover table-striped table-bordered table-condensed">
                </asp:GridView>
            </div>
        </div>
    </div>
    <asp:LinkButton Width="130px" Height="50px" ID="print" runat="server" OnClientClick="printContent('test');return false;">Print</asp:LinkButton>
</asp:Content>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] { new DataColumn("Calculation"), new DataColumn("Value") });
        dt.Rows.Add("Test 1", 1235);
        dt.Rows.Add("Test 2", 66666);
        dt.Rows.Add("Test 3", 9999);
        dt.Rows.Add("Test 4", 666555);
        grdCalculate.DataSource = dt;
        grdCalculate.DataBind();
    }
}