Update document for efx-grid v6.0.155

Refinitiv · Aug 28, 2024 · 06483d3 · 06483d3
1 parent 8288c8a
commit 06483d3
Show file tree

Hide file tree

Showing 168 changed files with 324,544 additions and 378,008 deletions.
diff --git a/index.html b/index.html
diff --git a/resources/elf-halo-dark.js b/resources/elf-halo-dark.js
diff --git a/resources/elf-halo-light.js b/resources/elf-halo-light.js
diff --git a/resources/extensions.js b/resources/extensions.js
diff --git a/template-10.html b/template-10.html
diff --git a/template-100.html b/template-100.html
diff --git a/template-101.html b/template-101.html
@@ -1,29 +1,2 @@
-<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(&quot;efx-grid&quot;)[0];
-
-// formatter can be a function
-var formatter = function(e) {
-    var value = e.grid.getRowData(e.rowIndex)[e.field];
-    e.cell.setContent(value);
-};
-
-/*
-// 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="realtime-market-data">Realtime Market Data</h1>
+<p>This section has been moved <a href="#/realtime-data/jet">here</a>.</p>
diff --git a/template-102.html b/template-102.html
@@ -1,18 +1,13 @@
-<h1 id="formatter-default">Formatter (default)</h1>
-<p>Formatter is what Grid uses to render content. Grid&#39;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>
-<blockquote>
-<p>Note: The formatter will be repeatedly executed multiple times for every update and scrolling. </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&#39;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">&lt;efx-grid id=&quot;grid&quot;&gt;&lt;/efx-grid&gt;
+<h1 id="row-span">Row Span</h1>
+<p>Setting row span on a cell can be done through Core Grid API (e.g., <code>setCellRowSpan</code>). A cell with row span will simply be expanded on top of cells below it. Cells are not actually merged by row span, but appeared as if they are merged together.</p>
+<p>Since cells in grid are reused across multiple rows by default, <code>rowVirtualization</code> need to be turned off for row span to work properly.</p>
+<h2 id="row-virtualization-mode">Row virtualization mode</h2>
+<p>Grid does not support row span in row virtualization mode. The row virtualization mode can be set using <code>rowVirtualization: false</code> in the configs.</p>
+<h3 id="example-1-setting-row-span-after-initialization">Example 1: setting row span after initialization</h3>
+<code-sandbox hash="e5e30954"><pre><code class="language-html">&lt;atlas-blotter id=&quot;grid&quot;&gt;&lt;/atlas-blotter&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.
+<pre><code class="language-javascript">import &#39;./resources/extensions.js&#39;; // This line is only required for demo purpose. It is not relevant for your application.
+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.
 
 /* ---------------------------------- Note ----------------------------------
@@ -21,32 +16,72 @@ <h2 id="example">Example</h2>
   Importing formatters and extensions is still required in your application. 
   Please see the document for further information.
 ---------------------------------------------------------------------------*/
-var fields = [&quot;companyName&quot;, &quot;market&quot;, &quot;CF_LAST&quot;, &quot;CF_NETCHNG&quot;, &quot;industry&quot;];
-var records = DataGenerator.generateRecords(fields, { numRows: 40 });
+var fields = [&quot;id&quot;, &quot;market&quot;, &quot;CF_LAST&quot;, &quot;CF_NETCHNG&quot;, &quot;industry&quot;];
+var records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 10 });
 var configObj = {
+    rowVirtualization: false,
     columns: [
-        {name: &quot;Company&quot;, field: fields[0]},
-        {name: &quot;Market&quot;, field: fields[1]},
-        {name: &quot;Last&quot;, field: fields[2]},
-        {name: &quot;Net. Chng&quot;, field: fields[3]},
+        {name: &quot;Row Index&quot;, field: fields[0], width: 60},
+        {name: &quot;Market&quot;, field: fields[1], width: 120},
+        {name: &quot;Last&quot;, field: fields[2], width: 100},
+        {name: &quot;Net. Chng&quot;, field: fields[3], width: 100},
         {name: &quot;Industry&quot;, field: fields[4]}
     ],
     staticDataRows: records
 };
 
 var grid = document.getElementById(&quot;grid&quot;);
+grid.addEventListener(&quot;configured&quot;, function(e) {
+    var core = e.detail.api.getCoreGrid();
+    var section = core.getSection(&#39;content&#39;);
+    section.setCellRowSpan(1, 0, 2);
+    section.setCellRowSpan(4, 4, 3);
+    section.setCellRowSpan(0, 4, 4);
+});
 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 = {
+</code-sandbox><h3 id="example-2-setting-row-span-in-data-binding">Example 2: setting row span in data binding</h3>
+<code-sandbox hash="8be6de76"><pre><code class="language-css">atlas-blotter {
+    height: 300px;
+    margin-bottom: 40px;
+}
+</code></pre>
+<pre><code class="language-html">&lt;atlas-blotter id=&quot;grid&quot;&gt;&lt;/atlas-blotter&gt;
+</code></pre>
+<pre><code class="language-javascript">import &#39;./resources/extensions.js&#39;; // This line is only required for demo purpose. It is not relevant for your application.
+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.
+
+/* ---------------------------------- 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 = [&quot;id&quot;, &quot;companyName&quot;, &quot;market&quot;, &quot;CF_LAST&quot;, &quot;CF_NETCHNG&quot;, &quot;industry&quot;];
+var records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 20 });
+
+var onCustomBinding = function(e) {
+    if(e.rowIndex % 2 === 0) {
+        e.section.setCellRowSpan(e.colIndex, e.rowIndex, 2);
+    }
+    e.cell.setContent(e.data);
+};
+
+var configObj = {
+    rowVirtualization: false,
     columns: [
-        { binding: function(e){
-                e.cell.setContent(e.data);
-            }
-        }
-    ]
+        {name: &quot;Row Index&quot;, field: fields[0], width: 60},
+        {name: &quot;Company Name&quot;, field: fields[1], width: 120, binding: onCustomBinding},
+        {name: &quot;Market&quot;, field: fields[2], width: 120, binding: onCustomBinding},
+        {name: &quot;Last&quot;, field: fields[3], width: 100},
+        {name: &quot;Net. Chng&quot;, field: fields[4], width: 100},
+        {name: &quot;Industry&quot;, field: fields[5]}
+    ],
+    staticDataRows: records
 };
+
+var grid = document.getElementById(&quot;grid&quot;);
+grid.config = configObj;
 </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>
+</code-sandbox><p><br><br><br></p>