ghiscoding · ghiscoding · Dec 22, 2020 · Dec 20, 2020 · Dec 20, 2020 · Dec 20, 2020
diff --git a/cli-requirejs-demo/aurelia_project/aurelia.json b/cli-requirejs-demo/aurelia_project/aurelia.json
@@ -95,31 +95,6 @@
               "multiple-select.css"
             ]
           },
-          {
-            "name": "@slickgrid-universal/excel-export",
-            "path": "../node_modules/@slickgrid-universal/excel-export/dist/commonjs",
-            "main": "index"
-          },
-          {
-            "name": "@slickgrid-universal/graphql",
-            "path": "../node_modules/@slickgrid-universal/graphql/dist/commonjs",
-            "main": "index"
-          },
-          {
-            "name": "@slickgrid-universal/odata",
-            "path": "../node_modules/@slickgrid-universal/odata/dist/commonjs",
-            "main": "index"
-          },
-          {
-            "name": "@slickgrid-universal/text-export",
-            "path": "../node_modules/@slickgrid-universal/text-export/dist/commonjs",
-            "main": "index"
-          },
-          {
-            "name": "@slickgrid-universal/common",
-            "path": "../node_modules/@slickgrid-universal/common/dist/commonjs",
-            "main": "index"
-          },
           {
             "name": "jquery-ui-dist",
             "path": "../node_modules/jquery-ui-dist",

diff --git a/cli-requirejs-demo/package.json b/cli-requirejs-demo/package.json
@@ -17,15 +17,15 @@
     "url": "http://github.com/ghiscoding/aurelia-slickgrid"
   },
   "dependencies": {
-    "@slickgrid-universal/excel-export": "^0.7.1",
-    "@slickgrid-universal/graphql": "^0.7.1",
-    "@slickgrid-universal/odata": "^0.5.1",
-    "@slickgrid-universal/text-export": "^0.7.1",
+    "@slickgrid-universal/excel-export": "^0.8.0",
+    "@slickgrid-universal/graphql": "^0.8.0",
+    "@slickgrid-universal/odata": "^0.8.0",
+    "@slickgrid-universal/text-export": "^0.8.0",
     "aurelia-bootstrapper": "^2.3.3",
     "aurelia-animator-css": "^1.0.4",
     "aurelia-http-client": "^1.3.1",
     "aurelia-i18n": "^3.1.4",
-    "aurelia-slickgrid": "3.0.0",
+    "aurelia-slickgrid": "3.1.0",
     "bluebird": "^3.7.2",
     "bootstrap": "^4.5.3",
     "flatpickr": "^4.6.6",

diff --git a/cli-requirejs-demo/src/examples/slickgrid/example1.html b/cli-requirejs-demo/src/examples/slickgrid/example1.html
@@ -9,9 +9,7 @@ <h3>Grid 1</h3>
     <aurelia-slickgrid grid-id="grid1"
                        column-definitions.bind="columnDefinitions1"
                        grid-options.bind="gridOptions1"
-                       dataset.bind="dataset1"
-                       grid-height="300"
-                       grid-width="800">
+                       dataset.bind="dataset1">
     </aurelia-slickgrid>
 
     <hr />
@@ -20,9 +18,7 @@ <h3>Grid 2</h3>
     <aurelia-slickgrid grid-id="grid2"
                        column-definitions.bind="columnDefinitions2"
                        grid-options.bind="gridOptions2"
-                       dataset.bind="dataset2"
-                       grid-height="300"
-                       grid-width="800">
+                       dataset.bind="dataset2">
     </aurelia-slickgrid>
   </div>
-</template>
+</template>
diff --git a/cli-requirejs-demo/src/examples/slickgrid/example1.js b/cli-requirejs-demo/src/examples/slickgrid/example1.js
@@ -32,7 +32,9 @@ export class Example1 {
     ];
     this.gridOptions1 = {
       enableAutoResize: false,
-      enableSorting: true
+      enableSorting: true,
+      gridHeight: 300,
+      gridWidth: 800
     };
 
     // copy the same Grid Options and Column Definitions to 2nd grid

diff --git a/cli-requirejs-demo/src/examples/slickgrid/example10.html b/cli-requirejs-demo/src/examples/slickgrid/example10.html
@@ -16,8 +16,6 @@ <h2>${title}</h2>
                      column-definitions.bind="columnDefinitions1"
                      grid-options.bind="gridOptions1"
                      dataset.bind="dataset1"
-                     grid-height="200"
-                     grid-width="800"
                      on-selected-rows-changed.delegate="onGrid1SelectedRowsChanged($event.detail.eventData, $event.detail.args)">
   </aurelia-slickgrid>
 
@@ -37,8 +35,6 @@ <h2>${title}</h2>
                      column-definitions.bind="columnDefinitions2"
                      grid-options.bind="gridOptions2"
                      dataset.bind="dataset2"
-                     grid-height="200"
-                     grid-width="800"
                      on-selected-rows-changed.delegate="onGrid2SelectedRowsChanged($event.detail.eventData, $event.detail.args)">
   </aurelia-slickgrid>
-</template>
+</template>
diff --git a/cli-requirejs-demo/src/examples/slickgrid/example10.js b/cli-requirejs-demo/src/examples/slickgrid/example10.js
@@ -51,6 +51,8 @@ export class Example2 {
     ];
     this.gridOptions1 = {
       enableAutoResize: false,
+      gridHeight: 200,
+      gridWidth: 800,
       enableCellNavigation: true,
       enableCheckboxSelector: true,
       checkboxSelector: {
@@ -63,8 +65,11 @@ export class Example2 {
       },
       enableRowSelection: true
     };
+
     this.gridOptions2 = {
       enableAutoResize: false,
+      gridHeight: 200,
+      gridWidth: 800,
       enableCellNavigation: true,
       rowSelectionOptions: {
         // True (Single Selection), False (Multiple Selections)

diff --git a/cli-requirejs-demo/src/examples/slickgrid/example11.js b/cli-requirejs-demo/src/examples/slickgrid/example11.js
@@ -102,8 +102,8 @@ export class Example11 {
     this.gridOptions = {
       asyncEditorLoading: false,
       autoResize: {
-        containerId: 'demo-container',
-        sidePadding: 10
+        container: '#demo-container',
+        rightPadding: 10
       },
       editable: true,
       enableColumnPicker: true,

diff --git a/cli-requirejs-demo/src/examples/slickgrid/example12.js b/cli-requirejs-demo/src/examples/slickgrid/example12.js
@@ -112,8 +112,8 @@ export class Example12 {
 
     this.gridOptions = {
       autoResize: {
-        containerId: 'demo-container',
-        sidePadding: 10
+        container: '#demo-container',
+        rightPadding: 10
       },
       enableAutoResize: true,
       enableExcelCopyBuffer: true,
@@ -169,7 +169,7 @@ export class Example12 {
   }
 
   exportToFile(type = 'csv') {
-    this.aureliaGrid.exportService.exportToFile({
+    this.textExportService.exportToFile({
       delimiter: (type === 'csv') ? DelimiterType.comma : DelimiterType.tab,
       filename: 'myExport',
       format: (type === 'csv') ? FileType.csv : FileType.txt

diff --git a/cli-requirejs-demo/src/examples/slickgrid/example13.js b/cli-requirejs-demo/src/examples/slickgrid/example13.js
@@ -104,8 +104,8 @@ export class Example13 {
 
     this.gridOptions = {
       autoResize: {
-        containerId: 'demo-container',
-        sidePadding: 10
+        container: '#demo-container',
+        rightPadding: 10
       },
       enableGrouping: true,
       enableExcelExport: true,

diff --git a/cli-requirejs-demo/src/examples/slickgrid/example14.html b/cli-requirejs-demo/src/examples/slickgrid/example14.html
@@ -2,7 +2,9 @@
   <h2>${title}</h2>
   <div class="subtitle" innerhtml.bind="subTitle"></div>
 
-  <aurelia-slickgrid grid-id="grid1" column-definitions.bind="columnDefinitions" grid-options.bind="gridOptions" dataset.bind="dataset"
-    grid-height="500" grid-width="800">
+  <aurelia-slickgrid grid-id="grid1"
+                     column-definitions.bind="columnDefinitions"
+                     grid-options.bind="gridOptions"
+                     dataset.bind="dataset">
   </aurelia-slickgrid>
-</template>
+</template>
diff --git a/cli-requirejs-demo/src/examples/slickgrid/example14.js b/cli-requirejs-demo/src/examples/slickgrid/example14.js
@@ -42,6 +42,8 @@ export class Example14 {
 
     this.gridOptions = {
       enableAutoResize: false,
+      gridHeight: 500,
+      gridWidth: 800,
       enableCellNavigation: true,
       enableColumnReorder: false,
       enableSorting: true,

diff --git a/cli-requirejs-demo/src/examples/slickgrid/example15.js b/cli-requirejs-demo/src/examples/slickgrid/example15.js
@@ -126,8 +126,8 @@ export class Example15 {
 
     this.gridOptions = {
       autoResize: {
-        containerId: 'demo-container',
-        sidePadding: 10
+        container: '#demo-container',
+        rightPadding: 10
       },
       enableCheckboxSelector: true,
       enableFiltering: true,

diff --git a/cli-requirejs-demo/src/examples/slickgrid/example16.js b/cli-requirejs-demo/src/examples/slickgrid/example16.js
@@ -55,8 +55,8 @@ export class Example16 {
     this.gridOptions = {
       enableAutoResize: true,
       autoResize: {
-        containerId: 'demo-container',
-        sidePadding: 10
+        container: '#demo-container',
+        rightPadding: 10
       },
       enableCellNavigation: true,
       enableRowMoveManager: true,

diff --git a/cli-requirejs-demo/src/examples/slickgrid/example2.js b/cli-requirejs-demo/src/examples/slickgrid/example2.js
@@ -46,8 +46,8 @@ export class Example2 {
 
     this.gridOptions = {
       autoResize: {
-        containerId: 'demo-container',
-        sidePadding: 10
+        container: '#demo-container',
+        rightPadding: 10
       },
       enableExcelCopyBuffer: true
     };

diff --git a/cli-requirejs-demo/src/examples/slickgrid/example3.js b/cli-requirejs-demo/src/examples/slickgrid/example3.js
@@ -317,8 +317,8 @@ export class Example3 {
       autoEdit: this.isAutoEdit,
       autoCommitEdit: false,
       autoResize: {
-        containerId: 'demo-container',
-        sidePadding: 10
+        container: '#demo-container',
+        rightPadding: 10
       },
       editable: true,
       enableCellNavigation: true,

diff --git a/cli-requirejs-demo/src/examples/slickgrid/example4.js b/cli-requirejs-demo/src/examples/slickgrid/example4.js
@@ -181,8 +181,8 @@ export class Example4 {
 
     this.gridOptions = {
       autoResize: {
-        containerId: 'demo-container',
-        sidePadding: 10
+        container: '#demo-container',
+        rightPadding: 10
       },
       enableFiltering: true,
 

diff --git a/cli-requirejs-demo/src/examples/slickgrid/example5.js b/cli-requirejs-demo/src/examples/slickgrid/example5.js
@@ -1,5 +1,5 @@
 import { GridOdataService } from '@slickgrid-universal/odata';
-import { autoinject } from 'aurelia-framework';
+import { inject } from 'aurelia-framework';
 import { HttpClient } from 'aurelia-http-client';
 import {
   FieldType,
@@ -10,7 +10,7 @@ import {
 const defaultPageSize = 20;
 const sampleDataRoot = 'assets/data';
 
-@autoinject()
+@inject(HttpClient)
 export class Example5 {
   title = 'Example 5: Grid with Backend OData Service';
   subTitle = `
@@ -30,7 +30,7 @@ export class Example5 {
     </ul>
   `;
   aureliaGrid;
-  columnDefinitions;
+  columnDefinitions = [];
   gridOptions;
   dataset = [];
   metrics;
@@ -75,8 +75,8 @@ export class Example5 {
     this.gridOptions = {
       enableAutoResize: true,
       autoResize: {
-        containerId: 'demo-container',
-        sidePadding: 10
+        container: '#demo-container',
+        rightPadding: 10
       },
       checkboxSelector: {
         // you can toggle these 2 properties to show the "select all" checkbox in different location

diff --git a/cli-requirejs-demo/src/examples/slickgrid/example6.html b/cli-requirejs-demo/src/examples/slickgrid/example6.html
@@ -26,8 +26,10 @@ <h2>${title}</h2>
     </div>
   </div>
 
-  <aurelia-slickgrid grid-id="grid1" column-definitions.bind="columnDefinitions" grid-options.bind="gridOptions"
-                     dataset.bind="dataset" grid-height="200" grid-width="800"
+  <aurelia-slickgrid grid-id="grid1"
+                     column-definitions.bind="columnDefinitions"
+                     grid-options.bind="gridOptions"
+                     dataset.bind="dataset"
                      on-aurelia-grid-created.delegate="aureliaGridReady($event.detail)">
   </aurelia-slickgrid>
-</template>
+</template>
diff --git a/cli-requirejs-demo/src/examples/slickgrid/example6.js b/cli-requirejs-demo/src/examples/slickgrid/example6.js
@@ -79,9 +79,9 @@ export class Example6 {
           collection: [{ value: 'acme', label: 'Acme' }, { value: 'abc', label: 'Company ABC' }, { value: 'xyz', label: 'Company XYZ' }]
         }
       },
-      { id: 'billing.address.street', field: 'billing.address.street', nameKey: 'BILLING.ADDRESS.STREET', width: 60, filterable: true, sortable: true },
+      { id: 'billingAddressStreet', field: 'billing.address.street', nameKey: 'BILLING.ADDRESS.STREET', width: 60, filterable: true, sortable: true },
       {
-        id: 'billing.address.zip', field: 'billing.address.zip', nameKey: 'BILLING.ADDRESS.ZIP', width: 60,
+        id: 'billingAddressZip', field: 'billing.address.zip', nameKey: 'BILLING.ADDRESS.ZIP', width: 60,
         type: FieldType.number,
         filterable: true, sortable: true,
         filter: {
@@ -93,6 +93,8 @@ export class Example6 {
 
     this.gridOptions = {
       enableAutoResize: false,
+      gridHeight: 200,
+      gridWidth: 800,
       enableFiltering: true,
       enableCellNavigation: true,
       enableCheckboxSelector: true,

diff --git a/cli-requirejs-demo/src/examples/slickgrid/example7.js b/cli-requirejs-demo/src/examples/slickgrid/example7.js
@@ -51,8 +51,8 @@ export class Example7 {
       enableHeaderButton: true,
       enableHeaderMenu: false,
       autoResize: {
-        containerId: 'demo-container',
-        sidePadding: 10
+        container: '#demo-container',
+        rightPadding: 10
       },
       enableFiltering: false,
       enableCellNavigation: true,

diff --git a/cli-requirejs-demo/src/examples/slickgrid/example8.js b/cli-requirejs-demo/src/examples/slickgrid/example8.js
@@ -78,8 +78,8 @@ export class Example8 {
       enableAutoResize: true,
       enableHeaderMenu: true,
       autoResize: {
-        containerId: 'demo-container',
-        sidePadding: 10
+        container: '#demo-container',
+        rightPadding: 10
       },
       enableFiltering: false,
       enableCellNavigation: true,

diff --git a/cli-requirejs-demo/src/examples/slickgrid/example9.js b/cli-requirejs-demo/src/examples/slickgrid/example9.js
@@ -80,8 +80,8 @@ export class Example9 {
       enableAutoResize: true,
       enableGridMenu: true,
       autoResize: {
-        containerId: 'demo-container',
-        sidePadding: 10
+        container: '#demo-container',
+        rightPadding: 10
       },
       enableFiltering: true,
       enableCellNavigation: true,

diff --git a/cli-requirejs-demo/src/resources/value-converters/date-format.js b/cli-requirejs-demo/src/resources/value-converters/date-format.js
@@ -1,4 +1,4 @@
-import moment from 'moment';
+import moment from 'moment-mini';
 
 export class DateFormatValueConverter {
   toView(value, format) {

diff --git a/webpack-bs3-demo-with-locales/package.json b/webpack-bs3-demo-with-locales/package.json
@@ -22,18 +22,18 @@
     "test": "au test"
   },
   "dependencies": {
-    "@slickgrid-universal/composite-editor-component": "^0.7.1",
-    "@slickgrid-universal/excel-export": "^0.7.1",
-    "@slickgrid-universal/graphql": "^0.7.1",
-    "@slickgrid-universal/odata": "^0.5.1",
-    "@slickgrid-universal/text-export": "^0.7.1",
+    "@slickgrid-universal/composite-editor-component": "^0.8.0",
+    "@slickgrid-universal/excel-export": "^0.8.0",
+    "@slickgrid-universal/graphql": "^0.8.0",
+    "@slickgrid-universal/odata": "^0.8.0",
+    "@slickgrid-universal/text-export": "^0.8.0",
     "aurelia-animator-css": "^1.0.4",
     "aurelia-bootstrapper": "^2.3.3",
     "aurelia-fetch-client": "^1.8.2",
     "aurelia-http-client": "^1.3.1",
     "aurelia-i18n": "^3.1.4",
     "aurelia-polyfills": "^1.3.4",
-    "aurelia-slickgrid": "3.0.0",
+    "aurelia-slickgrid": "3.1.0",
     "bluebird": "^3.7.2",
     "bootstrap": "^3.4.1",
     "font-awesome": "^4.7.0",