Skip to content

Commit

Permalink
Update document for efx-grid v6.0.119
Browse files Browse the repository at this point in the history
  • Loading branch information
@efx-grid
efx-grid committed Feb 28, 2024
1 parent e33d5e0 commit 129d961
Show file tree
Hide file tree
Showing 9 changed files with 6,255 additions and 5,218 deletions.
2 changes: 1 addition & 1 deletion index.html
View file

Large diffs are not rendered by default.

5,550 changes: 3,012 additions & 2,538 deletions resources/elf-halo-dark.js
View file

Large diffs are not rendered by default.

5,550 changes: 3,012 additions & 2,538 deletions resources/elf-halo-light.js
View file

Large diffs are not rendered by default.

72 changes: 45 additions & 27 deletions template-117.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ <h3 id="native-tab-navigation-example">Native tab navigation example</h3>
};
</code></pre>
<h3 id="tab-navigation-with-grids-content-example">Tab navigation with Grid&#39;s content example</h3>
<code-sandbox hash="e809d77c"><pre><code class="language-css">efx-grid {
<code-sandbox hash="cd2a27ba"><pre><code class="language-css">efx-grid {
height: 220px;
}
html hr {
Expand Down Expand Up @@ -154,7 +154,7 @@ <h3 id="tab-navigation-with-grids-content-example">Tab navigation with Grid&#39;
window.addEventListener(&quot;keydown&quot;, function onKeyDown(e) {
if(e.keyCode === 9) {
key_indi.style.opacity = &quot;1&quot;;
setTimeout(onHideKeyIndicator, 200);
setTimeout(onHideKeyIndicator, 400);
}
});
function onHideKeyIndicator() {
Expand All @@ -164,22 +164,22 @@ <h3 id="tab-navigation-with-grids-content-example">Tab navigation with Grid&#39;
</code-sandbox><h2 id="copy-and-paste-operations">Copy and paste operations</h2>
<p>Although Grid can get focus through Tab key, it does not get focus through mouse click by default. This is to allow mouse interaction with its content by not automatically shifting focus on Grid element (e.g., text selection requires focus to stay on the same element). If Grid does not contain any interactive content, you can listening to <code>click</code> event and put focus on the grid. To put the focus on Grid element, use <code>focus()</code> method from Grid&#39;s APIs. </p>
<p>Once Grid is in focus, you can catch native <code>copy</code> and <code>paste</code> events from Grid to manipulate or retrieve data from system clipboard. The example below shows how to populate data on Grid using clipboard data and setting Grid data to the clipboard.</p>
<h3 id="copying-and-pasting-tsv-tab-separated-values-example">Copying and pasting TSV (Tab Separated Values) example</h3>
<code-sandbox hash="dff4ff2c"><pre><code class="language-css">efx-grid {
<h3 id="copying-and-pasting-grids-content-in-tsv-format-example">Copying and pasting grid&#39;s content in TSV format example</h3>
<code-sandbox hash="1c315101"><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;
}
html hr {
margin: 5px;
}
html body {
padding: 5px;
box-sizing: border-box;
}
mark {
opacity: 0;
padding: 4px;
Expand All @@ -190,9 +190,14 @@ <h3 id="copying-and-pasting-tsv-tab-separated-values-example">Copying and pastin
height: 120px;
}
</code></pre>
<pre><code class="language-html">&lt;big&gt;Try copying texts below and pasting them onto grid&lt;/big&gt;
<pre><code class="language-html">&lt;big&gt;Try copying texts below and pasting them onto grid.&lt;/big&gt;
&lt;hr&gt;
&lt;textarea id=&quot;msg_ta&quot;&gt;&lt;/textarea&gt;
&lt;hr&gt;
&lt;big&gt;Try clicking grid and copying (&lt;b&gt;Ctrl/Command + C&lt;/b&gt;) grid&#39;s content.&lt;/big&gt;
&lt;br&gt;
&lt;big&gt;Then, paste the content on some other places.&lt;/big&gt;
&lt;hr&gt;
&lt;efx-grid id=&quot;grid&quot;&gt;&lt;/efx-grid&gt;
&lt;hr&gt;
&lt;mark id=&quot;key_indi&quot;&gt;&lt;/mark&gt;
Expand All @@ -211,6 +216,9 @@ <h3 id="copying-and-pasting-tsv-tab-separated-values-example">Copying and pastin
var dataset2 = DataGenerator.generateRecords(fields, { seed: 20, numRows: 7 });

msg_ta.value = recordsToTSV(dataset2);
msg_ta.addEventListener(&quot;focus&quot;, function(e) {
e.currentTarget.select();
});

var configObj = {
columns: [
Expand All @@ -230,28 +238,38 @@ <h3 id="copying-and-pasting-tsv-tab-separated-values-example">Copying and pastin
grid.api.focus();
});
grid.addEventListener(&quot;copy&quot;, function onCopy(e) {
var records = grid.api.getMultipleRowData();
var tsv = recordsToTSV(records);
e.clipboardData.setData(&quot;text/plain&quot;, tsv);
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(&quot;\t&quot;) + &quot;\n&quot; +
rows.map(recordToTSV).join(&quot;\n&quot;);

e.clipboardData.setData(&quot;text/plain&quot;, text);
e.preventDefault();
showKeyIndicator(&quot;data is copied to clipboard&quot;);

showKeyIndicator(&quot;Data is copied to clipboard&quot;);
});
grid.addEventListener(&quot;paste&quot;, function onPaste(e) {
e.preventDefault();

var tsv = e.clipboardData.getData(&quot;text/plain&quot;);
grid.data = tsvToRecords(tsv);
showKeyIndicator(&quot;data is pasted onto Grid&quot;);

showKeyIndicator(&quot;Data is pasted onto Grid&quot;);
});

function recordToTSV(record) {
return ([
record[fields[0]],
record[fields[1]],
record[fields[2]],
record[fields[3]],
record[fields[4]]
]).join(&quot;\t&quot;); // TSV (Tab Separated Values)
}
function recordsToTSV(records) {
return records.map(function(record) {
return ([
record[fields[0]],
record[fields[1]],
record[fields[2]],
record[fields[3]],
record[fields[4]]
]).join(&quot;\t&quot;);
}).join(&quot;\n&quot;);
return records.map(recordToTSV).join(&quot;\n&quot;);
}
function tsvToRecords(tsv) {
if(!tsv) {
Expand All @@ -274,7 +292,7 @@ <h3 id="copying-and-pasting-tsv-tab-separated-values-example">Copying and pastin
key_indi.textContent = text;
}
key_indi.style.opacity = &quot;1&quot;;
setTimeout(onHideKeyIndicator, 500);
setTimeout(onHideKeyIndicator, 1000);
}
function onHideKeyIndicator() {
key_indi.style.opacity = &quot;&quot;;
Expand Down
164 changes: 81 additions & 83 deletions template-123.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,25 +126,43 @@ <h3 id="example-1">Example</h3>
</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 the focus method on the grid API to focus on the grid.
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="61ea4aff"><pre><code class="language-css">efx-grid {
height: 300px;
<code-sandbox hash="9730f9b3"><pre><code class="language-css">html body {
padding: 5px;
box-sizing: border-box;
}
textarea {
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;
}
#feedback {
color: green;
mark {
opacity: 0;
padding: 4px;
transition: opacity 0.5s ease-out;
}
</code></pre>
<pre><code class="language-html">&lt;div id=&quot;header&quot;&gt; Click for focus in the grid and copy text with &quot;ctrl+c&quot; inside grid, it will be write your clipboard with all data in the grid &lt;/div&gt;
&lt;div id=&quot;feedback&quot;&gt;&lt;/div&gt;
<pre><code class="language-html">&lt;big&gt;Try clicking grid and copying (&lt;b&gt;Ctrl/Command + C&lt;/b&gt;) grid&#39;s content.&lt;/big&gt;
&lt;br&gt;
&lt;big&gt;Then, paste the content on the text box below.&lt;/big&gt;
&lt;hr&gt;
&lt;mark id=&quot;key_indi&quot;&gt;&lt;/mark&gt;
&lt;hr&gt;
&lt;efx-grid id=&quot;grid&quot;&gt;&lt;/efx-grid&gt;
&lt;hr&gt;
&lt;textarea placeholder=&quot;Paste text here&quot;&gt;&lt;/textarea&gt;
&lt;textarea placeholder=&quot;Paste clipboard content here&quot;&gt;&lt;/textarea&gt;
</code></pre>
<pre><code class="language-javascript">import { halo } from &#39;./theme-loader.js&#39;; // 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.
Expand All @@ -155,86 +173,66 @@ <h3 id="example-2">Example</h3>
Importing formatters and extensions is still required in your application.
Please see the document for further information.
---------------------------------------------------------------------------*/
var fields = [
&quot;id&quot;,
&quot;companyName&quot;,
&quot;market&quot;,
&quot;CF_LAST&quot;,
&quot;CF_NETCHNG&quot;,
&quot;industry&quot;
];
var records = DataGenerator.generateRecords(fields, { numRows: 50, seed: 0 });
var config = {
columns: [
{
field: fields[0],
name: &quot;ID&quot;
},
{
field: fields[1],
name: &quot;Company Name&quot;
},
{
field: fields[2],
name: &quot;Market&quot;
},
{
field: fields[3],
name: &quot;Last&quot;
},
{
field: fields[4],
name: &quot;Net. Chng&quot;
},
{
field: fields[5],
name: &quot;Industry&quot;
},
],
staticDataRows: records
};

var grid = document.getElementById(&quot;grid&quot;);
grid.config = config;
window.grid = grid;

grid.addEventListener(&quot;click&quot;, onGridClick);
grid.addEventListener(&quot;copy&quot;, onGridCopy);
var fields = [&quot;id&quot;, &quot;companyName&quot;, &quot;market&quot;, &quot;CF_LAST&quot;, &quot;CF_NETCHNG&quot;, &quot;industry&quot;];
var records = DataGenerator.generateRecords(fields, { seed: 0, numRows: 20 });

function onGridClick(e) {
// We need to listen for a click event on the grid to focus on it, which will allow us to track the copy event
function onClick(e) {
grid.api.focus();
}

function onGridCopy(e) {
// When the grid is focused, the listen function will be triggered and we can provide data to be copied to the clipboard before the copy event occurs
var allNames = grid.api.getColumnNames();

var i;
var colValues = allNames;

var rows = grid.api.getMultipleRowData();

// We can use the join method to map the rows of object data to a string, separating each row with a tab character. This can be useful when trying to paste the data into an Excel spreadsheet.
var rowValues = rows.map(function (row) {
return [
row[&quot;id&quot;],
row[&quot;companyName&quot;],
row[&quot;market&quot;],
row[&quot;CF_LAST&quot;],
row[&quot;CF_NETCHNG&quot;],
row[&quot;industry&quot;]
].join(&quot;\t&quot;);
});
var text = colValues.join(&quot;\t&quot;) + &quot;\n&quot; + rowValues.join(&quot;\n&quot;);
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(&quot;\t&quot;) + &quot;\n&quot; +
rows.map(recordToTSV).join(&quot;\n&quot;);

e.clipboardData.setData(&quot;text/plain&quot;, text);
// Below is a feedback message that is displayed to the user when they have successfully copied text. The message will automatically clear after 3 seconds
feedback.textContent = &quot;Successfully copied text from the grid&quot;;
setTimeout(function (e) {
feedback.textContent = &quot;&quot;;
}, 3000);

e.preventDefault();

showKeyIndicator(&quot;Data is copied to clipboard&quot;);
}
function recordToTSV(record) {
return ([
record[fields[0]],
record[fields[1]],
record[fields[2]],
record[fields[3]],
record[fields[4]]
]).join(&quot;\t&quot;); // TSV (Tab Separated Values)
}
function showKeyIndicator(text) {
if(text) {
key_indi.textContent = text;
}
key_indi.style.opacity = &quot;1&quot;;
setTimeout(onHideKeyIndicator, 1000);
}
function onHideKeyIndicator() {
key_indi.style.opacity = &quot;&quot;;
}

var configObj = {
sorting: {
sortableColumns: true
},
columns: [
{ name: &quot;Id&quot;, field: fields[0], width: 40 },
{ name: &quot;Company&quot;, field: fields[1] },
{ name: &quot;Market&quot;, field: fields[2], width: 100 },
{ name: &quot;Last&quot;, field: fields[3], width: 80 },
{ name: &quot;Net. Chng&quot;, field: fields[4], width: 80 },
{ name: &quot;Industry&quot;, field: fields[5] }
],
staticDataRows: records,
extensions: []
};

var grid = document.getElementById(&quot;grid&quot;);
grid.config = configObj;

grid.addEventListener(&quot;click&quot;, onClick);
grid.addEventListener(&quot;copy&quot;, onCopy);
</code></pre>
</code-sandbox><p><br><br></p>
Loading

0 comments on commit 129d961

Please sign in to comment.