-
Notifications
You must be signed in to change notification settings - Fork 0
/
template-151.html
111 lines (104 loc) · 15.9 KB
/
template-151.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<link rel="stylesheet" href="./resources/styles/elf-template.css">
<h1 id="printing">Printing</h1>
<p>You can print Grid using the Printing Utility or the native printer feature within a browser. The native printer is more difficult to use, however.</p>
<h2 id="using-a-native-printer">Using a native printer</h2>
<p>Since content can scroll inside Grid, native printers do not work well with it, as the final print preview truncates any components that are not currently visible on the screen.</p>
<p>To solve this, you need to update the grid's configuration to show all hidden information before you preview it. See the steps below.</p>
<h3 id="1-initialize-grid">1. Initialize Grid</h3>
<pre><code class="language-js">var config = {
// ... See column options for available options
};
var grid = document.getElementById("grid");
grid.config = config;
</code></pre>
<h3 id="2-adjust-the-grids-resolution">2. Adjust the Grid's resolution</h3>
<p>Adjust the Grid's resolution to reflect the paper size (for example, A3, A4, A5).</p>
<blockquote>
<p><code>@media print</code> CSS properties cannot be used to adjust Grid's style, as Grid will not re-render itself with CSS properties. They can only be used to adjust the layout before the print preview.</p>
</blockquote>
<pre><code class="language-js">function beforePrint() {
grid.style.width = "180mm"; // A4 width
grid.style.height = "unset";
}
</code></pre>
<h3 id="3-delayed-windowprint">3. Delayed <code>window.print</code></h3>
<p>Grid needs approximately 300ms to recalculate and re-render itself. So you need to make sure Grid has enough time to update its state before the print preview appears.</p>
<pre><code class="language-js">function print() {
beforePrint();
setTimeout(function () {
window.print();
}, 500); // Grid needs at least 300ms to recalculate and repaint itself.
}
</code></pre>
<h3 id="4-after-printing">4. After printing</h3>
<p>Lastly, the grid's configuration needs to be restored to its initial state. For this, the <code>window.onafterprint</code> hook will be triggered once printing is finished.</p>
<pre><code class="language-js">window.onafterprint = function () {
grid.style.width = "100%";
grid.style.height = "500px";
}
</code></pre>
<h2 id="using-the-printing-utility">Using the Printing Utility</h2>
<p>Unlike the native printer above, the Printing Utility has been created to help print the grid without other components. Rows and columns will not be truncated when using the utility.</p>
<p>Basically, the utility creates a new grid DOM dynamically and copies its data into this newly created grid. It will be destroyed automatically when printing is finished.</p>
<code-sandbox hash="bb8a7d5e"><pre><code class="language-css">efx-grid {
height: 300px;
}
</code></pre>
<pre><code class="language-html"><button id="print">print</button>
<efx-grid id="grid"></efx-grid>
</code></pre>
<pre><code class="language-javascript">import { halo } from './theme-loader.js'; // This line is only required for demo purpose. It is not relevant for your application.
await halo(); // This line is only required for demo purpose. It is not relevant for your application.
/* ---------------------------------- Note ----------------------------------
DataGenerator, Formatters and extensions are exposed to global scope
in the bundle file to make it easier to create live examples.
Importing formatters and extensions is still required in your application.
Please see the document for further information.
---------------------------------------------------------------------------*/
var fields = ["companyName", "market", "CF_LAST", "CF_NETCHNG", "industry", "icon"];
DataGenerator.addFieldInfo("icon", {
type: "set",
members: ["up", "down", "phone", "calendar", "flame"]
});
var records = DataGenerator.generateRecords(fields, { numRows: 20 });
var configObj = {
columns: [
{name: "Company", field: fields[0]},
{name: "Market", field: fields[1], width: 100},
{name: "Last", field: fields[2], width: 80},
{name: "Net. Chng", field: fields[3], width: 80},
{name: "Industry", field: fields[4]},
{name: "Icon", field: fields[5], binding: EFIconFormatter.create()}
],
staticDataRows: records
};
var grid = document.getElementById("grid");
grid.config = configObj;
document.getElementById("print").addEventListener("click", function() {
GridPrinter.print(grid);
});
</code></pre>
</code-sandbox><p>First, install package from npm.</p>
<pre><code class="language-bash">npm install @refinitiv-ui/efx-grid
</code></pre>
<p>Then, use <code>import</code> syntax for importing the utility into your app.</p>
<pre><code class="language-js">import { GridPrinter } from "@refinitiv-ui/efx-grid/utils";
</code></pre>
<p>Finally, send Grid into the GridPrinter utility.</p>
<pre><code class="language-js">var config = {
// ... See column options for available options
};
var grid = document.getElementById("grid");
grid.config = config;
GridPrinter.print(grid);
</code></pre>
<h2 style="margin-bottom:5px" id="api-refs">GridPrinter API Reference</h2>
<div id="elf-api-container"><div id="main-template" class="elf-template"> <section><header> <h1 class="subsection-title">GridPrinter</h1> </header><article> <h3 class="subsection-title" id="type_definitions">Type Definitions</h3>
<div class="item"> <div class="item-type">typedef</div> <h4 class="name" id="~Options">Options</h4><div class="description"> Configuration object for customizing priting behavior can be passed through `GridPrinter.setPrintOptions` method</div> <h5>Type:</h5> <span class="param-type">Object</span> <h5>Properties:</h5> <div class="props"><table> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>pageWidth</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last">Paper width in pixel. This limits number of columns to be shown on a single page</td> </tr> <tr> <td class="name"><code>pageHeight</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last">Paper height in pixel. This limits number of rows to be shown on a single page</td> </tr> <tr> <td class="name"><code>primaryColumn</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last">Column index that will be placed as the first column on each page.</td> </tr> </tbody></table></div><div class="details"> </div></div> <h3 class="subsection-title" id="methods">Methods</h3>
<div class="item"> <div class="item-type">function</div> <h4 class="name" id=".createPrintElement"><span class="type-signature"></span>createPrintElement<span class="signature">(grid, options<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {Element}</span></h4> <h5>Parameters:</h5> <div class="params"> <div class="param"> <div class="name">grid</div> <div class="type"> <span class="param-type">*</span> </div> <div class="attributes"> </div> <div class="description"> grid element, currently supports efx-grid, emerald-grid, tr.CompositeGrid, rt.Grid and Core </div> </div> <div class="param"> <div class="name">options</div> <div class="type"> <span class="param-type">Object</span> </div> <div class="attributes"> <optional> </div> </div> </div> <div class="details"> </div> <h5>Returns:</h5> <div class="sub-content"> <span class="param-type">Element</span> </div> </div>
<div class="item"> <div class="item-type">function</div> <h4 class="name" id=".enableDebugMode"><span class="type-signature"></span>enableDebugMode<span class="signature">(bool<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4> <h5>Parameters:</h5> <div class="params"> <div class="param"> <div class="name">bool</div> <div class="type"> <span class="param-type">boolean</span> </div> <div class="attributes"> <optional> </div> </div> </div> <div class="details"> </div> </div>
<div class="item"> <div class="item-type">function</div> <h4 class="name" id=".getPreFlightInfo"><span class="type-signature"></span>getPreFlightInfo<span class="signature">(grid, options<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {Object}</span></h4> <h5>Parameters:</h5> <div class="params"> <div class="param"> <div class="name">grid</div> <div class="type"> <span class="param-type">tr.Grid</span> </div> <div class="attributes"> </div> </div> <div class="param"> <div class="name">options</div> <div class="type"> <span class="param-type">Object</span> </div> <div class="attributes"> <optional> </div> </div> </div> <div class="details"> </div> <h5>Returns:</h5> <div class="sub-content"> <span class="param-type">Object</span> </div> </div>
<div class="item"> <div class="item-type">function</div> <h4 class="name" id=".observe"><span class="type-signature"></span>observe<span class="signature">(iFrameElement<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4> <h5>Parameters:</h5> <div class="params"> <div class="param"> <div class="name">iFrameElement</div> <div class="type"> <span class="param-type">HTMLIFrameElement</span> </div> <div class="attributes"> <optional> </div> <div class="description"> If not specified, current window is used instead. Specify null to un-observe existing window object. </div> </div> </div> <div class="details"> </div> </div>
<div class="item"> <div class="item-type">function</div> <h4 class="name" id=".print"><span class="type-signature"></span>print<span class="signature">(grid)</span><span class="type-signature"></span></h4> <h5>Parameters:</h5> <div class="params"> <div class="param"> <div class="name">grid</div> <div class="type"> <span class="param-type">*</span> </div> <div class="description"> grid element, currently supports efx-grid, efx-grid, emerald-grid, tr.CompositeGrid, rt.Grid and Core </div> </div> </div> <div class="details"> </div> </div>
<div class="item"> <div class="item-type">function</div> <h4 class="name" id=".setPrintOptions"><span class="type-signature"></span>setPrintOptions<span class="signature">(options)</span><span class="type-signature"></span></h4> <h5>Parameters:</h5> <div class="params"> <div class="param"> <div class="name">options</div> <div class="type"> <span class="param-type">GridPrinter.Options</span> </div> </div> </div> <div class="details"> </div> </div>
<div class="item"> <div class="item-type">function</div> <h4 class="name" id=".unobserve"><span class="type-signature"></span>unobserve<span class="signature">()</span><span class="type-signature"></span></h4> <div class="details"> </div> </div> </article></section></div></div>