From 403e729e31fd0437233a1d4eec73a65838e92f08 Mon Sep 17 00:00:00 2001 From: Pornchai Korpraserttaworn Date: Thu, 29 Aug 2024 17:42:45 +0700 Subject: [PATCH] Update document for efx-grid v6.0.156. --- index.html | 2 +- resources/elf-halo-dark.js | 4 +-- resources/elf-halo-light.js | 4 +-- template-40.html | 65 ++++++++++++++++++++----------------- template-46.html | 43 ++++++++++++++---------- template-71.html | 63 +++++++++++++++++++++++++++++++++++ 6 files changed, 129 insertions(+), 52 deletions(-) diff --git a/index.html b/index.html index ff7aaef4..f70f497f 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -
Theme :

\ No newline at end of file +
Theme :

\ No newline at end of file diff --git a/resources/elf-halo-dark.js b/resources/elf-halo-dark.js index 063c37aa..6d285bef 100644 --- a/resources/elf-halo-dark.js +++ b/resources/elf-halo-dark.js @@ -12887,7 +12887,7 @@ Recommended fix: /* harmony export */x: () => ( /* binding */VERSION) /* harmony export */ }); - const VERSION = '6.18.3'; + const VERSION = '6.18.4'; /***/ }), @@ -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 diff --git a/resources/elf-halo-light.js b/resources/elf-halo-light.js index e0f13cff..29f52633 100644 --- a/resources/elf-halo-light.js +++ b/resources/elf-halo-light.js @@ -12887,7 +12887,7 @@ Recommended fix: /* harmony export */x: () => ( /* binding */VERSION) /* harmony export */ }); - const VERSION = '6.18.3'; + const VERSION = '6.18.4'; /***/ }), @@ -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 diff --git a/template-40.html b/template-40.html index 5b993404..a82e8d59 100644 --- a/template-40.html +++ b/template-40.html @@ -201,7 +201,7 @@

Converting invalid data example

Auto date conversion

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 autoDateConversion in the Grid's configuration and let Grid automatically convert data to JavaScript native Date object. To let Grid know that the column's data is data-time, the dataType: "datetime" should be specified in the column's options.

-
<efx-grid id="grid"></efx-grid>
+
<efx-grid id="grid"></efx-grid>
 

 
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.
@@ -213,23 +213,23 @@ 
Converting invalid data example

   Please see the document for further information.
 ---------------------------------------------------------------------------*/
 var descriptions = [
-    "Invalid",
-    "Negative value (milliseconds)",
+    "ISO date-time string",
+    "Native Date object",
+    "Milliseconds",
+    "Seconds",
     "Excel date",
-    "Second",
-    "Millisecond",
-    "Native date object (now)",
-    "ISO date-time string"
+    "Negative value",
+    "Invalid"
 ];
 
 var dateSamples = [
-    "abc",
-    -1,
-    1,
-    Date.UTC(2021, 11, 24, 10)/1000,
-    Date.UTC(2021, 11, 24, 10),
+    "2021-11-25T10:00:00",
     new Date(),
-    "2021-11-25T10:00:00"
+    Date.UTC(2021, 11, 24, 10),
+    Date.UTC(2021, 11, 24, 10)/1000,
+    1,
+    -1,
+    "abc"
 ];
 
 var records = [];
@@ -248,11 +248,13 @@ 
Converting invalid data example

     columns: [
         {
             name: "Description",
-            field: "des"
+            field: "des",
+            width: 130
         },
         {
             name: "Raw data",
-            field: "date_RAW"
+            field: "date_RAW", // This field is auto-generated from date field
+            width: 130
         },
         {
             name: "Converted data",
@@ -262,21 +264,24 @@ 
Converting invalid data example

         {
             name: "Formatted data",
             field: "date",
+            dataType: "datetime",
+            alignment: "center",
+            width: 120,
             formatType: {
                 formatType: "DateTime",
                 dateTimeFormat: "DD/MM/YYYY HH:mm",
-                useUTCTime: true
             }
         },
         {
-            name: "Realtime Data",
+            name: "Realtime data",
             field: "last_update",
             dataType: "datetime",
             alignment: "center",
+            width: 130,
             formatType: {
                 formatType: "DateTime",
                 dateTimeFormat: "DD/MM/YYYY HH:mm:ss",
-                useUTCTime: true
+                useUTCTime: false // Display local time instead of UTC time (default)
             }
         }
     ],
@@ -287,16 +292,18 @@ 
Converting invalid data example

 };
 
 var grid = document.getElementById("grid");
-grid.addEventListener("configured", 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 < 5; ++i) { // Update the first 5 records
+        grid.api.setRowData(i, {
+            last_update: grid.api.getRowData(i)["date"].getTime() + timeCount * 1000
+        });
+    }
+    ++timeCount;
+}, 1000);
 

-
\ No newline at end of file
+

+

+

\ No newline at end of file
diff --git a/template-46.html b/template-46.html
index 0920c18f..9a96deb2 100644
--- a/template-46.html
+++ b/template-46.html
@@ -288,7 +288,8 @@ 
Dragging group header

     staticDataRows: records
 }
-

Segment nesting example

+

Segment nesting example

html hr {
     margin: 5px;
 }
@@ -444,12 +445,12 @@ 
Segment nesting example

 grid.data = records;

Group sorting

-

Row segmenting can be sorted manually through an API sortSeparators from SortableTitlePlugin. 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.

+

By default segment header/separator rows will not be sorted when click at the grid'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 sortSeparators API from SortableTitlePlugin. 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.

html hr {
+
html hr {
     margin: 5px;
 }
 

@@ -469,7 +470,7 @@ 
Segment nesting example

 ---------------------------------------------------------------------------*/
 var rowSegmentingExt = new RowSegmenting();
 var fields = ["companyName", "market", "CF_LAST", "CF_NETCHNG", "industry"];
-var records = DataGenerator.generateRecords(fields, { numRows: 15 });
+var records = DataGenerator.generateRecords(fields, { seed: 1, numRows: 15 });
 var segmentField = "SegmentId";
 records[2]["segmentOrder"] = 1;
 records[2][segmentField] = "1";
@@ -486,7 +487,14 @@ 
Segment nesting example

 records[11][segmentField] = "3";
 records[12][segmentField] = "3";
 
-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["ROW_DEF"].getData("segmentOrder");
     var segmentOrderB = rowB["ROW_DEF"].getData("segmentOrder");
     if(segmentOrderA < segmentOrderB) {
@@ -498,14 +506,17 @@ 
Segment nesting example

     return 0;
 }
 
+document.getElementById("clear_sort").addEventListener("click", function(e) {
+    sortableTitlePlugin.clearSortState();
+});
+document.getElementById("original_sort_segment").addEventListener("click", 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
@@ -524,17 +535,13 @@ 
Segment nesting example

 };
 var grid = window.grid = document.getElementsByTagName("efx-grid")[0];
 grid.config = configObj;
-document.getElementById("clear_sort").addEventListener("click", function(e) {
-    var stPlugin = grid.api.getCoreGrid().getPlugin("SortableTitlePlugin");
-    stPlugin.clearSortState();
-});
-document.getElementById("original_sort_segment").addEventListener("click", function(e) {
-    var stPlugin = grid.api.getCoreGrid().getPlugin("SortableTitlePlugin");
-    stPlugin.sortSeparators(originalSortFunc);
+grid.addEventListener("configured", function(e){
+    var core = grid.api.getCoreGrid();
+    sortableTitlePlugin = core.getPlugin("SortableTitlePlugin");
 });

Content sorting

-

Row content is sorted within its own group. The behavior is the same for both Row Segmenting and Row Grouping Extension.

+

Content rows are sorted within its own group/segment. The behavior is the same for both Row Segmenting and Row Grouping Extension.

Predefined color on the color tags

The extension supports color from the predefined colors. To do this you need to assign predefined class object to the predefinedColors property then specify field name of the cssField property.

html hr {
diff --git a/template-71.html b/template-71.html
index 9f92f7cb..8d4375e0 100644
--- a/template-71.html
+++ b/template-71.html
@@ -273,6 +273,69 @@ 
Formatting custom conten
 var grid = document.getElementById("grid");
 grid.config = configObj;
+

Displaying local date time

+

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 useUTCTime option to false on the formatType property in the column configuration object.

+
<efx-grid id="grid"></efx-grid>
+
+
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 records = [
+    {"des": "Current time", "date": new Date()}
+];
+var configObj = {
+    columns: [
+        {
+            name: "Description",
+            field: "des",
+            width: 120
+        },
+        {
+            name: "Date Object",
+            field: "date"
+        },
+        {
+            name: "Formatted UTC",
+            field: "date",
+            alignment: "center",
+            width: 130,
+            formatType: {
+                formatType: "DateTime",
+                dateTimeFormat: "DD/MM/YYYY HH:mm:ss"
+            }
+        },
+        {
+            name: "Formatted local",
+            field: "date",
+            alignment: "center",
+            width: 130,
+            formatType: {
+                formatType: "DateTime",
+                dateTimeFormat: "DD/MM/YYYY HH:mm:ss",
+                useUTCTime: false // Display local time instead of UTC time (default)
+            }
+        }
+    ],
+    staticDataRows: records,
+    extensions: [
+        new TextFormatting()
+    ]
+};
+
+var grid = document.getElementById("grid");
+grid.config = configObj;
+
+setInterval(function simulateRealtimeUpdates() {
+    grid.api.setRowData(0, { date: new Date() });
+}, 1000);
+

API Reference

TextFormattingPlugin()