refactor(example): add 2x grids in the Basic Grid sample

ghiscoding · May 31, 2018 · e9306b3 · e9306b3
1 parent d54d032
commit e9306b3
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 17 deletions.
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example1.html b/aurelia-slickgrid/src/examples/slickgrid/example1.html
@@ -4,8 +4,26 @@
     <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="400" grid-width="800">
+    <h3>Grid 1</h3>
+    <aurelia-slickgrid
+        grid-id="grid1"
+        column-definitions.bind="columnDefinitions1"
+        grid-options.bind="gridOptions2"
+        dataset.bind="dataset2"
+        grid-height="300"
+        grid-width="800">
+    </aurelia-slickgrid>
+
+    <hr/>
+
+    <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">
     </aurelia-slickgrid>
   </div>
 </template>
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example1.ts b/aurelia-slickgrid/src/examples/slickgrid/example1.ts
@@ -4,45 +4,54 @@ export class Example1 {
   title = 'Example 1: Basic Grid';
   subTitle = `Simple Grid with Fixed Sizes (800 x 400) using "grid-height" &amp; "grid-width"`;
 
-  gridOptions: GridOption;
-  columnDefinitions: Column[];
-  dataset: any[];
+  gridOptions1: GridOption;
+  gridOptions2: GridOption;
+  columnDefinitions1: Column[];
+  columnDefinitions2: Column[];
+  dataset1: any[];
+  dataset2: any[];
 
   constructor() {
     // define the grid options & columns and then create the grid itself
-    this.defineGrid();
+    this.defineGrids();
   }
 
   attached() {
-    // populate the dataset once the grid is ready
-    this.getData();
+    // mock some data (different in each dataset)
+    this.dataset1 = this.mockData();
+    this.dataset2 = this.mockData();
   }
 
   /* Define grid Options and Columns */
-  defineGrid() {
-    this.columnDefinitions = [
+  defineGrids() {
+    this.columnDefinitions1 = [
       { id: 'title', name: 'Title', field: 'title', sortable: true, minWidth: 100 },
       { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, minWidth: 100 },
       { id: '%', name: '% Complete', field: 'percentComplete', sortable: true, minWidth: 100 },
       { id: 'start', name: 'Start', field: 'start', minWidth: 100 },
       { id: 'finish', name: 'Finish', field: 'finish', minWidth: 100 },
       { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true, minWidth: 100 }
     ];
-    this.gridOptions = {
-      enableAutoResize: false
+    this.gridOptions1 = {
+      enableAutoResize: false,
+      enableSorting: true
     };
+
+    // copy the same Grid Options and Column Definitions to 2nd grid
+    this.columnDefinitions2 = this.columnDefinitions1;
+    this.gridOptions2 = this.gridOptions1;
   }
 
-  getData() {
+  mockData() {
     // mock a dataset
-    this.dataset = [];
+    const mockDataset = [];
     for (let i = 0; i < 1000; i++) {
       const randomYear = 2000 + Math.floor(Math.random() * 10);
       const randomMonth = Math.floor(Math.random() * 11);
       const randomDay = Math.floor((Math.random() * 29));
       const randomPercent = Math.round(Math.random() * 100);
 
-      this.dataset[i] = {
+      mockDataset[i] = {
         id: i,
         title: 'Task ' + i,
         duration: Math.round(Math.random() * 100) + '',
@@ -52,5 +61,7 @@ export class Example1 {
         effortDriven: (i % 5 === 0)
       };
     }
+
+    return mockDataset;
   }
 }
diff --git a/aurelia-slickgrid/src/examples/slickgrid/index.ts b/aurelia-slickgrid/src/examples/slickgrid/index.ts
@@ -7,7 +7,7 @@ export class Index {
 
   configureRouter(config: RouterConfiguration, router: Router) {
     const mapping: any = [
-      { route: ['', 'example1'], moduleId: PLATFORM.moduleName('./example1'), name: 'example1', nav: true, title: '1- Basic Grid' },
+      { route: ['', 'example1'], moduleId: PLATFORM.moduleName('./example1'), name: 'example1', nav: true, title: '1- Basic Grid / 2 Grids' },
       { route: 'example2', moduleId: PLATFORM.moduleName('./example2'), name: 'example2', nav: true, title: '2- Formatters' },
       { route: 'example3', moduleId: PLATFORM.moduleName('./example3'), name: 'example3', nav: true, title: '3- Editors' },
       { route: 'example4', moduleId: PLATFORM.moduleName('./example4'), name: 'example4', nav: true, title: '4- Client Side Sort/Filter' },
@@ -16,7 +16,7 @@ export class Index {
       { route: 'example7', moduleId: PLATFORM.moduleName('./example7'), name: 'example7', nav: true, title: '7- Header Button Plugin' },
       { route: 'example8', moduleId: PLATFORM.moduleName('./example8'), name: 'example8', nav: true, title: '8- Header Menu Plugin' },
       { route: 'example9', moduleId: PLATFORM.moduleName('./example9'), name: 'example9', nav: true, title: '9- Grid Menu Control' },
-      { route: 'example10', moduleId: PLATFORM.moduleName('./example10'), name: 'example10', nav: true, title: '10- Row Selection' },
+      { route: 'example10', moduleId: PLATFORM.moduleName('./example10'), name: 'example10', nav: true, title: '10- Row Selection / 2 Grids' },
       { route: 'example11', moduleId: PLATFORM.moduleName('./example11'), name: 'example11', nav: true, title: '11- Add/Update Grid Item' },
       { route: 'example12', moduleId: PLATFORM.moduleName('./example12'), name: 'example12', nav: true, title: '12- Localization (i18n)' },
       { route: 'example13', moduleId: PLATFORM.moduleName('./example13'), name: 'example13', nav: true, title: '13- Grouping & Aggregators' },