-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update document for efx-grid v6.0.150
- Loading branch information
Showing
72 changed files
with
8,820 additions
and
7,621 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,238 @@ | ||
| <h1 id="changing-formatter-at-runtime">Changing Formatter at Runtime</h1> | ||
| <p>Sometimes you might want to change a custom rendering at runtime. This can be achieved by using <code>setColumnFormatter</code> method.</p> | ||
| <blockquote> | ||
| <p>APIs for Grid and the <code>setColumnFormatter()</code> method description can be found <a href="#/apis/rt-grid/grid">here</a>.</p> | ||
| </blockquote> | ||
| <pre><code class="language-js">var grid = document.getElementsByTagName("efx-grid")[0]; | ||
|
|
||
| // formatter can be a function | ||
| var formatter = function(e) { | ||
| var value = e.grid.getRowData(e.rowIndex)[e.field]; | ||
| e.cell.setContent(value); | ||
| }; | ||
| <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. | ||
|
|
||
| /* | ||
| // or can be an object. | ||
| var formatter = { | ||
| binding: function(e) { | ||
| var value = e.grid.getRowData(e.rowIndex)[e.field]; | ||
| e.cell.setContent(value); | ||
| /* ---------------------------------- 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); | ||
| } | ||
| }; | ||
| // or can be a predefined formatter | ||
| var formatter = SimpleLinkFormatter.create() | ||
| */ | ||
|
|
||
| function handleChangeFormatter() { | ||
| grid.api.setColumnFormatter(0 /* Column Index */, formatter); | ||
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,52 +1,29 @@ | ||
| <h1 id="formatter-default">Formatter (default)</h1> | ||
| <p>Formatter is what Grid uses to render content. Grid's default formatter will render any data in plain text. When data is updated, Grid will bind the data from its own internal data source to render the data in plain text using the formatter. The data given to grid can be any data type.</p> | ||
| <h1 id="changing-formatter-at-runtime">Changing Formatter at Runtime</h1> | ||
| <p>Sometimes you might want to change a custom rendering at runtime. This can be achieved by using <code>setColumnFormatter</code> method.</p> | ||
| <blockquote> | ||
| <p>Note: The formatter will be repeatedly executed multiple times for every update and scrolling. </p> | ||
| <p>APIs for Grid and the <code>setColumnFormatter()</code> method description can be found <a href="#/apis/rt-grid/grid">here</a>.</p> | ||
| </blockquote> | ||
| <p>Default rendering is already optimized for row virtualization. This means that grid uses the same text element to render different data for different rows. It should be fast enough to handle rendering a million of rows.</p> | ||
| <p>To update what is shown on the Grid, please use Grid's APIs to <a href="#/general-concept/accessing-data">manipulate the data</a> from the instance.</p> | ||
| <h2 id="example">Example</h2> | ||
| <code-sandbox hash="910e0fa0"><pre><code class="language-css">efx-grid { | ||
| height: 200px; | ||
| } | ||
| </code></pre> | ||
| <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. | ||
| <pre><code class="language-js">var grid = document.getElementsByTagName("efx-grid")[0]; | ||
|
|
||
| /* ---------------------------------- 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"]; | ||
| var records = DataGenerator.generateRecords(fields, { numRows: 40 }); | ||
| var configObj = { | ||
| columns: [ | ||
| {name: "Company", field: fields[0]}, | ||
| {name: "Market", field: fields[1]}, | ||
| {name: "Last", field: fields[2]}, | ||
| {name: "Net. Chng", field: fields[3]}, | ||
| {name: "Industry", field: fields[4]} | ||
| ], | ||
| staticDataRows: records | ||
| // formatter can be a function | ||
| var formatter = function(e) { | ||
| var value = e.grid.getRowData(e.rowIndex)[e.field]; | ||
| e.cell.setContent(value); | ||
| }; | ||
|
|
||
| var grid = document.getElementById("grid"); | ||
| grid.config = configObj; | ||
| </code></pre> | ||
| </code-sandbox><h2 id="internal-default-formatter-implementation">Internal Default Formatter Implementation</h2> | ||
| <p>Internally, Grid implements the formatter as the following code: </p> | ||
| <pre><code class="language-js">var configObj = { | ||
| columns: [ | ||
| { binding: function(e){ | ||
| e.cell.setContent(e.data); | ||
| } | ||
| } | ||
| ] | ||
| /* | ||
| // or can be an object. | ||
| var formatter = { | ||
| binding: function(e) { | ||
| var value = e.grid.getRowData(e.rowIndex)[e.field]; | ||
| e.cell.setContent(value); | ||
| } | ||
| }; | ||
| // or can be a predefined formatter | ||
| var formatter = SimpleLinkFormatter.create() | ||
| */ | ||
|
|
||
| function handleChangeFormatter() { | ||
| grid.api.setColumnFormatter(0 /* Column Index */, formatter); | ||
| } | ||
| </code></pre> | ||
| <h1 id="custom-formatter">Custom Formatter</h1> | ||
| <p>If we want anything other than simple text, we need to define a custom formatter. You can find more details about this in the <a href="#/rendering/custom-formatter">Custom Formatter section</a>.</p> |
Oops, something went wrong.