Skip to content

Commit

Permalink
Update document for efx-grid v6.0.156.
Browse files Browse the repository at this point in the history
  • Loading branch information
@efx-grid
efx-grid committed Aug 29, 2024
1 parent e36c2c9 commit 403e729
Show file tree
Hide file tree
Showing 6 changed files with 129 additions and 52 deletions.
2 changes: 1 addition & 1 deletion index.html
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions resources/elf-halo-dark.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12887,7 +12887,7 @@ Recommended fix:
/* harmony export */x: () => ( /* binding */VERSION)
/* harmony export */
});
const VERSION = '6.18.3';
const VERSION = '6.18.4';

/***/
}),
Expand Down Expand Up @@ -172447,7 +172447,7 @@ Recommended fix:
; // CONCATENATED MODULE: ./public/lib/grid/index.js

window.EFX_GRID = {
version: "6.0.155"
version: "6.0.156"
};
; // CONCATENATED MODULE: ./public/lib/grid/themes/halo/dark/efx-grid.js

Expand Down
4 changes: 2 additions & 2 deletions resources/elf-halo-light.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12887,7 +12887,7 @@ Recommended fix:
/* harmony export */x: () => ( /* binding */VERSION)
/* harmony export */
});
const VERSION = '6.18.3';
const VERSION = '6.18.4';

/***/
}),
Expand Down Expand Up @@ -172447,7 +172447,7 @@ Recommended fix:
; // CONCATENATED MODULE: ./public/lib/grid/index.js

window.EFX_GRID = {
version: "6.0.155"
version: "6.0.156"
};
; // CONCATENATED MODULE: ./public/lib/grid/themes/halo/light/efx-grid.js

Expand Down
65 changes: 36 additions & 29 deletions template-40.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@ <h3 id="converting-invalid-data-example">Converting invalid data example</h3>
</code></pre>
</code-sandbox><h2 id="auto-date-conversion">Auto date conversion</h2>
<p>When dealing with date-time data it may be hard to handle the various types of incoming data, which can be number, string, ISO date string, seconds or milliseconds. So it is better to enable <code>autoDateConversion</code> in the Grid&#39;s configuration and let Grid automatically convert data to JavaScript native Date object. To let Grid know that the column&#39;s data is data-time, the <code>dataType: &quot;datetime&quot;</code> should be specified in the column&#39;s options.</p>
<code-sandbox hash="e3ed62f3"><pre><code class="language-html">&lt;efx-grid id=&quot;grid&quot;&gt;&lt;/efx-grid&gt;
<code-sandbox hash="acfdc259"><pre><code class="language-html">&lt;efx-grid id=&quot;grid&quot;&gt;&lt;/efx-grid&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 @@ -213,23 +213,23 @@ <h3 id="converting-invalid-data-example">Converting invalid data example</h3>
Please see the document for further information.
---------------------------------------------------------------------------*/
var descriptions = [
&quot;Invalid&quot;,
&quot;Negative value (milliseconds)&quot;,
&quot;ISO date-time string&quot;,
&quot;Native Date object&quot;,
&quot;Milliseconds&quot;,
&quot;Seconds&quot;,
&quot;Excel date&quot;,
&quot;Second&quot;,
&quot;Millisecond&quot;,
&quot;Native date object (now)&quot;,
&quot;ISO date-time string&quot;
&quot;Negative value&quot;,
&quot;Invalid&quot;
];

var dateSamples = [
&quot;abc&quot;,
-1,
1,
Date.UTC(2021, 11, 24, 10)/1000,
Date.UTC(2021, 11, 24, 10),
&quot;2021-11-25T10:00:00&quot;,
new Date(),
&quot;2021-11-25T10:00:00&quot;
Date.UTC(2021, 11, 24, 10),
Date.UTC(2021, 11, 24, 10)/1000,
1,
-1,
&quot;abc&quot;
];

var records = [];
Expand All @@ -248,11 +248,13 @@ <h3 id="converting-invalid-data-example">Converting invalid data example</h3>
columns: [
{
name: &quot;Description&quot;,
field: &quot;des&quot;
field: &quot;des&quot;,
width: 130
},
{
name: &quot;Raw data&quot;,
field: &quot;date_RAW&quot;
field: &quot;date_RAW&quot;, // This field is auto-generated from date field
width: 130
},
{
name: &quot;Converted data&quot;,
Expand All @@ -262,21 +264,24 @@ <h3 id="converting-invalid-data-example">Converting invalid data example</h3>
{
name: &quot;Formatted data&quot;,
field: &quot;date&quot;,
dataType: &quot;datetime&quot;,
alignment: &quot;center&quot;,
width: 120,
formatType: {
formatType: &quot;DateTime&quot;,
dateTimeFormat: &quot;DD/MM/YYYY HH:mm&quot;,
useUTCTime: true
}
},
{
name: &quot;Realtime Data&quot;,
name: &quot;Realtime data&quot;,
field: &quot;last_update&quot;,
dataType: &quot;datetime&quot;,
alignment: &quot;center&quot;,
width: 130,
formatType: {
formatType: &quot;DateTime&quot;,
dateTimeFormat: &quot;DD/MM/YYYY HH:mm:ss&quot;,
useUTCTime: true
useUTCTime: false // Display local time instead of UTC time (default)
}
}
],
Expand All @@ -287,16 +292,18 @@ <h3 id="converting-invalid-data-example">Converting invalid data example</h3>
};

var grid = document.getElementById(&quot;grid&quot;);
grid.addEventListener(&quot;configured&quot;, function(e) {
var api = e.detail.api;
var randIndex = DataGenerator.randIndex;
setInterval(function() {
var index = randIndex(records.length);
api.setRowData(index, {
last_update: Date.now()
});
}, 400);
});
grid.config = configObj;

var timeCount = 0;
setInterval(function simulateRealtimeUpdates() {
for(var i = 0; i &lt; 5; ++i) { // Update the first 5 records
grid.api.setRowData(i, {
last_update: grid.api.getRowData(i)[&quot;date&quot;].getTime() + timeCount * 1000
});
}
++timeCount;
}, 1000);
</code></pre>
</code-sandbox>
</code-sandbox><br>
<br>
<br>
43 changes: 25 additions & 18 deletions template-46.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -288,7 +288,8 @@ <h2 id="dragging-group-header">Dragging group header</h2>
staticDataRows: records
}
</code></pre>
<h3 id="segment-nesting-example">Segment nesting example</h3>
<aside class="important"><p>It&#39;s important to have correct row order before putting them into grid. Parent row must come before its children, as the first row with an unique segment id will be used as segment header. The order of the rows matters.</p>
</aside><h3 id="segment-nesting-example">Segment nesting example</h3>
<code-sandbox hash="a8f0b3ec"><pre><code class="language-css">html hr {
margin: 5px;
}
Expand Down Expand Up @@ -444,12 +445,12 @@ <h3 id="segment-nesting-example">Segment nesting example</h3>
grid.data = records;
</code></pre>
</code-sandbox><h2 id="group-sorting">Group sorting</h2>
<p>Row segmenting can be sorted manually through an API <code>sortSeparators</code> from <code>SortableTitlePlugin</code>. The method accept a sorting function as parameter. If no parameter is passed to the function, the segments will be sorted according to the current sorting states of the grid.</p>
<p>By default segment header/separator rows will not be sorted when click at the grid&#39;s top header. Only content rows will be sorted while segment header/separator rows stay in the same place regardless of the sorting states. However, header/separator rows can be sorted manually by using <code>sortSeparators</code> API from <code>SortableTitlePlugin</code>. The method can optionally take a sorting function as its first parameter. If no parameter is passed to the function, the segments will be sorted according to the current sorting states of the grid.</p>
<aside class="info"><ul>
<li>When clearing the grid sorting state, the segments will not return to its original order. To make it return to original position, <code>sortSeparators</code> need to be called with a custom sorting function.</li>
<li>Sorting segment operation only swap position between segments, therefore the content rows between the segments will not be moved to stick together at top of the grid.</li>
</ul>
</aside><code-sandbox hash="972210b7"><pre><code class="language-css">html hr {
</aside><code-sandbox hash="e52e494a"><pre><code class="language-css">html hr {
margin: 5px;
}
</code></pre>
Expand All @@ -469,7 +470,7 @@ <h3 id="segment-nesting-example">Segment nesting example</h3>
---------------------------------------------------------------------------*/
var rowSegmentingExt = new RowSegmenting();
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: 15 });
var records = DataGenerator.generateRecords(fields, { seed: 1, numRows: 15 });
var segmentField = &quot;SegmentId&quot;;
records[2][&quot;segmentOrder&quot;] = 1;
records[2][segmentField] = &quot;1&quot;;
Expand All @@ -486,7 +487,14 @@ <h3 id="segment-nesting-example">Segment nesting example</h3>
records[11][segmentField] = &quot;3&quot;;
records[12][segmentField] = &quot;3&quot;;

var originalSortFunc = function(rowA, rowB){
var sortableTitlePlugin = null; // This will be available in configured event
function sortSegments() {
if(sortableTitlePlugin) {
// Sort segments according to the current sorting states
sortableTitlePlugin.sortSeparators();
}
}
function originalSegmentOrder(rowA, rowB, sortOrder, field){
var segmentOrderA = rowA[&quot;ROW_DEF&quot;].getData(&quot;segmentOrder&quot;);
var segmentOrderB = rowB[&quot;ROW_DEF&quot;].getData(&quot;segmentOrder&quot;);
if(segmentOrderA &lt; segmentOrderB) {
Expand All @@ -498,14 +506,17 @@ <h3 id="segment-nesting-example">Segment nesting example</h3>
return 0;
}

document.getElementById(&quot;clear_sort&quot;).addEventListener(&quot;click&quot;, function(e) {
sortableTitlePlugin.clearSortState();
});
document.getElementById(&quot;original_sort_segment&quot;).addEventListener(&quot;click&quot;, function(e) {
sortableTitlePlugin.sortSeparators(originalSegmentOrder);
});

var configObj = {
sorting: {
sortableColumns: true,
// After regular rows are sorted
// Sort segments by current grid sorting states
columnSorted: function (e) {
e.sender.sortSeparators();
}
columnSorted: sortSegments // Trigger segment sorting when a column is sorted
},
rowSegmenting: {
segmentIdField: segmentField
Expand All @@ -524,17 +535,13 @@ <h3 id="segment-nesting-example">Segment nesting example</h3>
};
var grid = window.grid = document.getElementsByTagName(&quot;efx-grid&quot;)[0];
grid.config = configObj;
document.getElementById(&quot;clear_sort&quot;).addEventListener(&quot;click&quot;, function(e) {
var stPlugin = grid.api.getCoreGrid().getPlugin(&quot;SortableTitlePlugin&quot;);
stPlugin.clearSortState();
});
document.getElementById(&quot;original_sort_segment&quot;).addEventListener(&quot;click&quot;, function(e) {
var stPlugin = grid.api.getCoreGrid().getPlugin(&quot;SortableTitlePlugin&quot;);
stPlugin.sortSeparators(originalSortFunc);
grid.addEventListener(&quot;configured&quot;, function(e){
var core = grid.api.getCoreGrid();
sortableTitlePlugin = core.getPlugin(&quot;SortableTitlePlugin&quot;);
});
</code></pre>
</code-sandbox><h2 id="content-sorting">Content sorting</h2>
<p>Row content is sorted within its own group. The behavior is the same for both Row Segmenting and Row Grouping Extension.</p>
<p>Content rows are sorted within its own group/segment. The behavior is the same for both Row Segmenting and Row Grouping Extension.</p>
<h2 id="predefined-color-on-the-color-tags">Predefined color on the color tags</h2>
<p>The extension supports color from the predefined colors. To do this you need to assign predefined class object to the <code>predefinedColors</code> property then specify field name of the <code>cssField</code> property.</p>
<code-sandbox hash="3cac1f63"><pre><code class="language-css">html hr {
Expand Down
63 changes: 63 additions & 0 deletions template-71.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -273,6 +273,69 @@ <h3 id="formatting-custom-content-by-using-formatlogic">Formatting custom conten
var grid = document.getElementById(&quot;grid&quot;);
grid.config = configObj;
</code></pre>
</code-sandbox><h2 id="displaying-local-date-time">Displaying local date time</h2>
<p>By default, Text Formatting Extension will take UTC time from the given Date object, format it, and display the formatted date in UTC time. To display the formatted date in local time, set <code>useUTCTime</code> option to <code>false</code> on the <code>formatType</code> property in the column configuration object. </p>
<code-sandbox hash="3f44b5be"><pre><code class="language-html">&lt;efx-grid id=&quot;grid&quot;&gt;&lt;/efx-grid&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.

/* ---------------------------------- 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 records = [
{&quot;des&quot;: &quot;Current time&quot;, &quot;date&quot;: new Date()}
];
var configObj = {
columns: [
{
name: &quot;Description&quot;,
field: &quot;des&quot;,
width: 120
},
{
name: &quot;Date Object&quot;,
field: &quot;date&quot;
},
{
name: &quot;Formatted UTC&quot;,
field: &quot;date&quot;,
alignment: &quot;center&quot;,
width: 130,
formatType: {
formatType: &quot;DateTime&quot;,
dateTimeFormat: &quot;DD/MM/YYYY HH:mm:ss&quot;
}
},
{
name: &quot;Formatted local&quot;,
field: &quot;date&quot;,
alignment: &quot;center&quot;,
width: 130,
formatType: {
formatType: &quot;DateTime&quot;,
dateTimeFormat: &quot;DD/MM/YYYY HH:mm:ss&quot;,
useUTCTime: false // Display local time instead of UTC time (default)
}
}
],
staticDataRows: records,
extensions: [
new TextFormatting()
]
};

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

setInterval(function simulateRealtimeUpdates() {
grid.api.setRowData(0, { date: new Date() });
}, 1000);
</code></pre>
</code-sandbox><h2 style="margin-bottom:5px" id="api-refs">API Reference</h2>
<div id="elf-api-container"><div id="main-template" class="elf-template"> <section><header> <h1 class="subsection-title"><span class="attribs"><span class="type-signature"></span></span>TextFormattingPlugin<span class="signature">()</span><span class="type-signature"></span></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="~ColumnOptions">ColumnOptions</h4><div class="description"> Available options that can be specified on the column configuration object</div> <h5>Type:</h5> <span class="param-type"><a href="#/extensions/tr-grid-textformatting#~FormatOptions">TextFormattingPlugin~FormatOptions</a></span><div class="details"> </div></div>
Expand Down

0 comments on commit 403e729

Please sign in to comment.