I search a lot to find a solution and now I find great one and I try it and
found it from https://stackoverflow.com/a/25737442/4542500
when I try It like that It's work fine
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs"Inherits="_Default" %>
<!DOCTYPE html>
<html>
<body>
<table class="print t1"> <!-- Delete "t1" class to remove row numbers. -->
<caption>Print-Friendly Table</caption>
<thead>
<tr>
<th></th>
<th>Column Header</th>
<th>Column Header</th>
<th>Multi-Line<br/>Column<br/>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>data</td>
<td>Multiple<br/>lines of<br/>data</td>
<td>data</td>
</tr>
</tbody>
</table>
</body>
</html>
<style>
/* THE FOLLOWING CSS IS REQUIRED AND SHOULD NOT BE MODIFIED. */
div.fauxRow {
display: inline-block;
vertical-align: top;
width: 100%;
page-break-inside: avoid;
}
table.fauxRow {border-spacing: 0;}
table.fauxRow > tbody > tr > td {
padding: 0;
overflow: hidden;
}
table.fauxRow > tbody > tr > td > table.print {
display: inline-table;
vertical-align: top;
}
table.fauxRow > tbody > tr > td > table.print > caption {caption-side: top;}
.noBreak {
float: right;
width: 100%;
visibility: hidden;
}
.noBreak:before, .noBreak:after {
display: block;
content: "";
}
.noBreak:after {margin-top: -594mm;}
.noBreak > div {
display: inline-block;
vertical-align: top;
width:100%;
page-break-inside: avoid;
}
/*table.print > thead {white-space: nowrap;}*/ /* Uncomment if line-wrapping
causes problems. */
table.print > tbody > tr {page-break-inside: avoid;}
table.print > tbody > .metricsRow > td {border-top: none !important;}
/* THE FOLLOWING CSS IS REQUIRED, but the values may be adjusted. */
/* NOTE: All size values that can affect an element's height should use the
px unit! */
table.fauxRow, table.print {
font-size: 16px;
line-height: 20px;
}
/* THE FOLLOWING CSS IS OPTIONAL. */
body {counter-reset: t1;} /* Delete to remove row numbers. */
.noBreak .t1 > tbody > tr > :first-child:before {counter-increment: none;} /*
Delete to remove row numbers. */
.t1 > tbody > tr > :first-child:before { /* Delete to remove row numbers. */
display: block;
text-align: right;
counter-increment: t1 1;
content: counter(t1);
}
table.fauxRow, table.print {
font-family: Tahoma, Verdana, Georgia; /* Try to use fonts that don't get
bigger when printed. */
margin: 0 auto 0 auto; /* Delete if you don't want table to be centered. */
}
table.print {border-spacing: 0;}
table.print > * > tr > * {
border-right: 2px solid black;
border-bottom: 2px solid black;
padding: 0 5px 0 5px;
}
table.print > * > :first-child > * {border-top: 2px solid black;}
table.print > thead ~ * > :first-child > *, table.print > tbody ~ * > :first-
child > * {border-top: none;}
table.print > * > tr > :first-child {border-left: 2px solid black;}
table.print > thead {vertical-align: bottom;}
table.print > thead > .borderRow > th {border-bottom: none;}
table.print > tbody {vertical-align: top;}
table.print > caption {font-weight: bold;}
</style>
<script>
(function () { // THIS FUNCTION IS NOT REQUIRED. It just adds table rows
for testing purposes.
var rowCount = 100
, tbod = document.querySelector("table.print > tbody")
, row = tbod.rows[0];
for (; --rowCount; tbod.appendChild(row.cloneNode(true)));
})();
function () { // THIS FUNCTION IS REQUIRED.
if (/Firefox|MSIE/i.test(navigator.userAgent))
var formatForPrint = function (table) {
var noBreak = document.createElement("div")
, noBreakTable =
noBreak.appendChild(document.createElement("div"))
.appendChild(table.cloneNode())
, tableParent = table.parentNode
, tableParts = table.children
, partCount = tableParts.length
, partNum = 0
, cell = table.querySelector("tbody > tr > td");
noBreak.className = "noBreak";
for (; partNum < partCount; partNum++) {
if (!/tbody/i.test(tableParts[partNum].tagName))
noBreakTable.appendChild(tableParts[partNum].cloneNode(true));
}
if (cell) {
noBreakTable.appendChild(cell.parentNode.parentNode.cloneNode())
.appendChild(cell.parentNode.cloneNode(true));
if (!table.tHead) {
var borderRow = document.createElement("tr");
borderRow.appendChild(document.createElement("th")).colSpan = "1000";
borderRow.className = "borderRow";
table.insertBefore(document.createElement("thead"),
table.tBodies[0]).appendChild(borderRow);
}
}
tableParent.insertBefore(document.createElement("div"),
table).style.paddingTop = ".009px";
tableParent.insertBefore(noBreak, table);
};
else
var formatForPrint = function (table) {
var tableParent = table.parentNode
, cell = table.querySelector("tbody > tr > td");
if (cell) {
var topFauxRow = document.createElement("table")
, fauxRowTable =
topFauxRow.insertRow(0).insertCell(0).appendChild(table.cloneNode())
, colgroup = fauxRowTable.appendChild(document.createElement("colgroup"))
, headerHider = document.createElement("div")
, metricsRow = document.createElement("tr")
, cells = cell.parentNode.cells
, cellNum = cells.length
, colCount = 0
, tbods = table.tBodies
, tbodCount = tbods.length
, tbodNum = 0
, tbod = tbods[0];
for (; cellNum--; colCount += cells[cellNum].colSpan);
for (cellNum = colCount; cellNum--;
metricsRow.appendChild(document.createElement("td")).style.padding = 0);
cells = metricsRow.cells;
tbod.insertBefore(metricsRow, tbod.firstChild);
for (; ++cellNum < colCount;
colgroup.appendChild(document.createElement("col")).style.width =
cells[cellNum].offsetWidth + "px");
var borderWidth = metricsRow.offsetHeight;
metricsRow.className = "metricsRow";
borderWidth -= metricsRow.offsetHeight;
tbod.removeChild(metricsRow);
tableParent.insertBefore(topFauxRow, table).className = "fauxRow";
if (table.tHead)
fauxRowTable.appendChild(table.tHead);
var fauxRow = topFauxRow.cloneNode(true)
, fauxRowCell = fauxRow.rows[0].cells[0];
fauxRowCell.insertBefore(headerHider,
fauxRowCell.firstChild).style.marginBottom = -fauxRowTable.offsetHeight -
borderWidth + "px";
if (table.caption)
fauxRowTable.insertBefore(table.caption, fauxRowTable.firstChild);
if (tbod.rows[0])
fauxRowTable.appendChild(tbod.cloneNode()).appendChild(tbod.rows[0]);
tbod = tbods[tbodNum];
rows = tbod.rows;
for (; rows[0]; tableParent.insertBefore(fauxRow.cloneNode(true),
table).rows[0].cells[0].children[1].appendChild
(tbod.cloneNode()).appendChild(rows[0]));
}
tableParent.removeChild(table);
}
else
tableParent.insertBefore(document.createElement("div"),
table).appendChild(table).parentNode.className = "fauxRow";
};
var tables = document.body.querySelectorAll("table.print")
, tableNum = tables.length;
for (; tableNum--; formatForPrint(tables[tableNum]));
})();
</script>
but when I apply my Grid view and try to print It print the grid view it print the grid view but without repeating the grid view header in each page plus I don't know how to transfer my grid view to table like to transfer the grid view to table and the item template to column in <tr> and <td> as the code above
any one can told me whats the issue here and how to transfer the grid view to table my code :
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AllowPaging="false"
EnableSortingAndPagingCallbacks="false" BackColor="White"
BorderColor="#999999"
ViewStateMode="Enabled" width="713px"CellPadding="3"
HorizontalAlign="Center" AllowSorting="True"
BorderStyle="Solid" BorderWidth="1px" ForeColor="Black"
GridLines="Vertical" AutoGenerateColumns="False" PageSize="20"
Height="16px" >
<Columns>
<asp:TemplateField HeaderText="الرصيد">
<ItemTemplate>
<asp:Label runat="server" ID="lblTotal" Text=""></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="مدين">
<ItemTemplate>
<div style="padding:0 0 5px 0"> <asp:Label ID="debit" runat="server"
Text='<%# (Eval("stat_flag").ToString() =="d" ) ? string.Format("
{0:0.000}",float.Parse(Eval("stat_amount").ToString())): "0.00" %>'>
</asp:Label></div>
<div><asp:Label ID="lblGrandTotal" runat="server" /></div>
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="totallblDebAmount" runat="server" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="دائن">
<ItemTemplate>
<div style="padding:0 0 5px 0"><asp:Label ID="credit" runat="server"
Text='<%# (Eval("stat_flag").ToString() =="c" ) ? string.Format("
{0:0.000}",float.Parse(Eval("stat_amount").ToString())): "0.00" %>'>
</asp:Label></div>
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="totallblCredAmount" runat="server" />
</FooterTemplate>
</asp:TemplateField>
<asp:BoundField DataField="stat_desc" HeaderText="البيان" ItemStyle-Font-
Size="Small">
<ItemStyle Font-Size="Small"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="serial"
HeaderText=" رقم السند " ItemStyle-Font Size="Small">
<ItemStyle Font-Size="Small"></ItemStyle>
</asp:BoundField>
<asp:TemplateField HeaderText="التاريخ">
<ItemTemplate>
<asp:Label ID="date" runat="server" Text='<%#Eval("stat_date" ,"
{0:dd/MM/yyyy}" )%>'> ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#336699" Font-Bold="True" ForeColor="White"
HorizontalAlign="right" />
<RowStyle BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
<HeaderStyle BackColor="#aaaaaa" Font-Bold="True" HorizontalAlign="Center"
VerticalAlign="Middle" ForeColor="Black" BorderColor="Black"
BorderStyle="Solid" BorderWidth="1px"/>
<PagerStyle BackColor="#999999" ForeColor="Blue" HorizontalAlign="Left"
Font-Bold="True"
Font-Underline="False" BorderStyle="Solid" BorderWidth="1px"
BorderColor="#666666" />
</asp:GridView>
</body>
</html>
<style>
/*THE FoLOWING CSS IS REQUIRED AND SHOULD NOT BE MODIFIED. */
div.fauxRow {
display: inline-block;
vertical-align: top;
width: 100%;
page-break-inside: avoid;
}
table.fauxRow {border-spacing: 0;}
table.fauxRow > tbody > tr > td {
padding: 0;
overflow: hidden;
}
table.fauxRow > tbody > tr > td > table.print {
display: inline-table;
vertical-align: top;
}
table.fauxRow > tbody > tr > td > table.print > caption {caption-side: top;}
.noBreak {
float: right;
width: 100%;
visibility: hidden;
}
.noBreak:before, .noBreak:after {
display: block;
content: "";
}
.noBreak:after {margin-top: -594mm;}
.noBreak > div {
display: inline-block;
vertical-align: top;
width:100%;
page-break-inside: avoid;
}
/*table.print > thead {white-space: nowrap;}*/ /* Uncomment if line-wrapping
causes problems. */
table.print > tbody > tr {page-break-inside: avoid;}
table.print > tbody > .metricsRow > td {border-top: none !important;}
/* THE FOLLOWING CSS IS REQUIRED, but the values may be adjusted. */
/* NOTE: All size values that can affect an element's height should use
the px unit! */
table.fauxRow, table.print {
font-size: 16px;
line-height: 20px;
}
/* THE FOLLOWING CSS IS OPTIONAL. */
body {counter-reset: t1;} /* Delete to remove row numbers. */
.noBreak .t1 > tbody > tr > :first-child:before {counter-increment: none;} /*
Delete to remove row numbers. */
.t1 > tbody > tr > :first-child:before { /* Delete to remove row numbers. */
display: block;
text-align: right;
counter-increment: t1 1;
content: counter(t1);
}
table.fauxRow, table.print {
font-family: Tahoma, Verdana, Georgia; /* Try to use fonts that don't get
bigger when printed. */
margin: 0 auto 0 auto; /* Delete if you don't want table to be centered. */
}
table.print {border-spacing: 0;}
table.print > * > tr > * {
border-right: 2px solid black;
border-bottom: 2px solid black;
padding: 0 5px 0 5px;
}
table.print > * > :first-child > * {border-top: 2px solid black;}
table.print > thead ~ * > :first-child > *, table.print > tbody ~ * > :first-
child > * {border-top: none;}
table.print > * > tr > :first-child {border-left: 2px solid black;}
table.print > thead {vertical-align: bottom;}
table.print > thead > .borderRow > th {border-bottom: none;}
table.print > tbody {vertical-align: top;}
table.print > caption {font-weight: bold;}
</style>
<script>
(function () { // THIS FUNCTION IS REQUIRED.
if (/Firefox|MSIE/i.test(navigator.userAgent))
var formatForPrint = function (table) {
var noBreak = document.createElement("div")
, noBreakTable =
noBreak.appendChild(document.createElement("div")).
appendChild(table.cloneNode())
, tableParent = table.parentNode
, tableParts = table.children
, partCount = tableParts.length
, partNum = 0
, cell = table.querySelector("tbody > tr > td");
noBreak.className = "noBreak";
for (; partNum < partCount; partNum++) {
if (!/tbody/i.test(tableParts[partNum].tagName))
noBreakTable.appendChild(tableParts[partNum].cloneNode(true));
}
if (cell) {
noBreakTable.appendChild(cell.parentNode.parentNode.cloneNode()).
appendChild(.appendChild(cell.parentNode.cloneNode(true));
if (!table.tHead) {
var borderRow = document.createElement("tr");
borderRow.appendChild(document.createElement("th")).colSpan = "1000";
borderRow.className = "borderRow";
table.insertBefore(document.createElement("thead"),
table.tBodies[0]).appendChild(borderRow);
}
}
tableParent.insertBefore(document.createElement("div"),
table).style.paddingTop = ".009px";
tableParent.insertBefore(noBreak, table);
};
else
var formatForPrint = function (table) {
var tableParent = table.parentNode
, cell = table.querySelector("tbody > tr > td");
if (cell) {
var topFauxRow = document.createElement("table")
, fauxRowTable =
topFauxRow.insertRow(0).insertCell(0).appendChild(table.cloneNode())
, colgroup = fauxRowTable.appendChild(document.createElement("colgroup"))
, headerHider = document.createElement("div")
, metricsRow = document.createElement("tr")
, cells = cell.parentNode.cells
, cellNum = cells.length
, colCount = 0
, tbods = table.tBodies
, tbodCount = tbods.length
, tbodNum = 0
, tbod = tbods[0];
for (; cellNum--; colCount += cells[cellNum].colSpan);
for (cellNum = colCount; cellNum--;
metricsRow.appendChild(document.createElement("td")).style.padding = 0);
cells = metricsRow.cells;
tbod.insertBefore(metricsRow, tbod.firstChild);
for (; ++cellNum < colCount;
colgroup.appendChild(document.createElement("col")).style.width =
cells[cellNum].offsetWidth + "px");
var borderWidth = metricsRow.offsetHeight;
metricsRow.className = "metricsRow";
borderWidth -= metricsRow.offsetHeight;
tbod.removeChild(metricsRow);
tableParent.insertBefore(topFauxRow, table).className = "fauxRow";
if (table.tHead)
fauxRowTable.appendChild(table.tHead);
var fauxRow = topFauxRow.cloneNode(true)
, fauxRowCell = fauxRow.rows[0].cells[0];
fauxRowCell.insertBefore(headerHider,
fauxRowCell.firstChild).style.marginBottom = -fauxRowTable.offsetHeight -
borderWidth + "px";
if (table.caption)
fauxRowTable.insertBefore(table.caption, fauxRowTable.firstChild);
if (tbod.rows[0])
fauxRowTable.appendChild(tbod.cloneNode()).appendChild(tbod.rows[0]);
for (; tbodNum < tbodCount; tbodNum++) {
tbod = tbods[tbodNum];
rows = tbod.rows;
for (; rows[0]; tableParent.insertBefore(fauxRow.cloneNode(true),
table).rows[0].cells[0].children[1].appendChild(tbod.cloneNode()).
appendChild(rows[0]));
}
tableParent.removeChild(table);
}
else
tableParent.insertBefore(document.createElement("div"),
table).appendChild(table).parentNode.className = "fauxRow";
};
var tables = document.body.querySelectorAll("table.print")
, tableNum = tables.length;
for (; tableNum--; formatForPrint(tables[tableNum]));
})();
</script>
</form>
