-
Notifications
You must be signed in to change notification settings - Fork 0
/
template-100.html
238 lines (224 loc) · 9.84 KB
/
template-100.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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<h1 id="text-selection">Text Selection</h1>
<p>Text selection has 2 scopes. It's grid scope and column scope. The default value of text selection is disabled, but you can enable it. If you enable it, users can select text in scope.</p>
<ul>
<li>The grid scope can enable by set textSelect property to <code>true</code> in configuration of <a href="#/apis/rt-grid/grid">Grid</a></li>
<li>The column scope can enable by set textSelect property to <code>true</code> in configuration of <a href="#/apis/rt-grid/columndefinition">Columns</a></li>
</ul>
<h2 id="limitation-with-safari">Limitation with safari</h2>
<ul>
<li>When you use Text selection with <a href="#/extensions/tr-grid-row-dragging">Row Dragging</a>, Safari is unable to select text.</li>
<li>Safari is unable to listening pointer events such as clicks, hovers, and so on. When you use <a href="#/rendering/custom-formatter">Custom Formatter</a> in a cell, it looks like this example.</li>
</ul>
<h3 id="example">Example</h3>
<p>If you use Safari, try clicking the button in column <code>Market</code> from the sample below. You won't be able to receive the click event.</p>
<code-sandbox hash="647069a8"><pre><code class="language-html"><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"];
var records = DataGenerator.generateRecords(fields, { numRows: 10 });
var buttonDisplay = {
binding: function (e) {
var cellData = e.cell;
var buttonContent = document.createElement("button");
var spanContent = document.createElement("span");
buttonContent.addEventListener("click" , () => {
alert(e.data);
});
spanContent.textContent = `${e.data}`;
buttonContent.appendChild(spanContent);
cellData.setContent(buttonContent);
}
};
var configObj = {
rowVirtualRendering: false,
textSelect : true,
columns: [
{name: "Company", field: fields[0]},
{name: "Market", field: fields[1], formatter: buttonDisplay , width: 120}
],
staticDataRows: records
};
var grid = document.getElementById("grid");
grid.config = configObj;
</code></pre>
</code-sandbox><h2 id="limitation-with-row-virtualization">Limitation with row virtualization</h2>
<p>Text selection with row virtualization cannot select all data in the grid.
In the example below, the grid has text selection enabled and uses row virtualization.
When you try to select and copy text from the grid and paste it into a text area, you will see that not all data from the grid is obtained.
This is because row virtualization render only the rows that is visible in the grid's viewport.
For example, if you have 50 rows of data, but the grid can only show the first 10 rows at a time, then when you try to select the text, it will only select the first 14 rows (10 rows + buffer rows).
If you want to know about row virtualization in more detail, you can refer to the <code>Understanding row virtualization</code> section in the <a href="#/rendering/custom-formatter">Custom Formatter</a> page.</p>
<h3 id="example-1">Example</h3>
<code-sandbox hash="8eaf24c0"><pre><code class="language-css">efx-grid {
height: 300px;
}
textarea {
height: 200px;
width: 100%;
}
</code></pre>
<pre><code class="language-html"><efx-grid id="grid"></efx-grid>
<hr>
<textarea placeholder="Paste text here"></textarea>
</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 = [
"id",
"companyName",
"market",
"CF_LAST",
"CF_NETCHNG",
"industry"
];
var records = DataGenerator.generateRecords(fields, { numRows: 50, seed: 0 });
var config = {
textSelect: true,
columns: [
{
field: fields[0],
name: "ID"
},
{
field: fields[1],
name: "Company Name"
},
{
field: fields[2],
name: "Market"
},
{
field: fields[3],
name: "Last"
},
{
field: fields[4],
name: "Net. Chng"
},
{
field: fields[5],
name: "Industry"
},
],
staticDataRows: records
};
var grid = document.getElementById("grid");
grid.config = config;
window.grid = grid;
</code></pre>
</code-sandbox><h2 id="copying-all-content-in-the-grid-without-text-selection">Copying all content in the grid without text selection</h2>
<p>If you want to copy all the data in the grid, you can do it by focusing on the grid element and modifying the clipboard without text selection.
To do this, you can listen for the <code>click</code> event on the grid element and call <code>focus</code> method on the grid API to focus on the grid.
Then, you can listen for the <code>copy</code> event on the grid element and modify the clipboard as shown in the example below.</p>
<h3 id="example-2">Example</h3>
<code-sandbox hash="9730f9b3"><pre><code class="language-css">html body {
padding: 5px;
box-sizing: border-box;
}
html hr {
margin: 5px;
}
efx-grid {
height: 200px;
}
efx-grid:focus-within {
outline-width: 1px;
outline-style: solid;
outline-color: blue;
}
textarea {
width: 100%;
height: 200px;
}
mark {
opacity: 0;
padding: 4px;
transition: opacity 0.5s ease-out;
}
</code></pre>
<pre><code class="language-html"><big>Try clicking grid and copying (<b>Ctrl/Command + C</b>) grid's content.</big>
<br>
<big>Then, paste the content on the text box below.</big>
<hr>
<mark id="key_indi"></mark>
<hr>
<efx-grid id="grid"></efx-grid>
<hr>
<textarea placeholder="Paste clipboard content here"></textarea>
</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 = ["id", "companyName", "market", "CF_LAST", "CF_NETCHNG", "industry"];
var records = DataGenerator.generateRecords(fields, { seed: 0, numRows: 20 });
function onClick(e) {
grid.api.focus();
}
function onCopy(e) {
var columnNames = grid.api.getColumnNames();
var rows = grid.api.getMultipleRowData(); // Get all row data from existing view
// Build text in TSV format
var text = columnNames.join("\t") + "\n" +
rows.map(recordToTSV).join("\n");
e.clipboardData.setData("text/plain", text);
e.preventDefault();
showKeyIndicator("Data is copied to clipboard");
}
function recordToTSV(record) {
return ([
record[fields[0]],
record[fields[1]],
record[fields[2]],
record[fields[3]],
record[fields[4]]
]).join("\t"); // TSV (Tab Separated Values)
}
function showKeyIndicator(text) {
if(text) {
key_indi.textContent = text;
}
key_indi.style.opacity = "1";
setTimeout(onHideKeyIndicator, 1000);
}
function onHideKeyIndicator() {
key_indi.style.opacity = "";
}
var configObj = {
sorting: {
sortableColumns: true
},
columns: [
{ name: "Id", field: fields[0], width: 40 },
{ name: "Company", field: fields[1] },
{ name: "Market", field: fields[2], width: 100 },
{ name: "Last", field: fields[3], width: 80 },
{ name: "Net. Chng", field: fields[4], width: 80 },
{ name: "Industry", field: fields[5] }
],
staticDataRows: records,
extensions: []
};
var grid = document.getElementById("grid");
grid.config = configObj;
grid.addEventListener("click", onClick);
grid.addEventListener("copy", onCopy);
</code></pre>
</code-sandbox><p><br><br></p>