refactor(grid): add multiple grids in a view

ghiscoding · May 26, 2018 · 27d1d2b · 27d1d2b
1 parent d2b1791
commit 27d1d2b
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 67 deletions.
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example10.html b/aurelia-slickgrid/src/examples/slickgrid/example10.html
@@ -3,34 +3,36 @@ <h2>${title}</h2>
   <div class="subtitle" innerhtml.bind="subTitle"></div>
 
   <div class="row">
-    <div class="col-sm-4">
-      <div class="form-inline">
-        <label class="control-label" for="radioRowSelectionClick">Multi-Select / Single</label>
-        <span id="radioRowSelectionClick">
-          <label class="radio-inline control-label" for="radioTrue">
-            <input type="radio" name="inlineRadioOptions" id="radioTrue" checked value.bind="isMultiSelect" click.delegate="onChooseMultiSelectType(true)"> Multi-Select
-          </label>
-          <label class="radio-inline control-label" for="radioFalse">
-            <input type="radio" name="inlineRadioOptions" id="radioFalse" value.bind="isMultiSelect" click.delegate="onChooseMultiSelectType(false)"> Single
-          </label>
-        </span>
+    <div class="col-sm-8">
+      <div class="alert alert-info">
+        <strong>(single select) Selected Row:</strong>
+        <div innerhtml.bind="selectedTitle"></div>
       </div>
     </div>
+  </div>
+
+  <aurelia-slickgrid
+    grid-id="grid1"
+    column-definitions.bind="columnDefinitions1"
+    grid-options.bind="gridOptions1"
+    dataset.bind="dataset1"
+    sg-on-selected-rows-changed.delegate="onGrid1SelectedRowsChanged($event.detail.eventData, $event.detail.args)">
+  </aurelia-slickgrid>
+
+  <div class="row">
     <div class="col-sm-8">
       <div class="alert alert-info">
-        <strong>Selected Row(s):</strong>
-        <div innerhtml.bind="selectedObjects"></div>
+        <strong>(multi-select) Selected Row(s):</strong>
+        <div innerhtml.bind="selectedTitles"></div>
       </div>
     </div>
   </div>
 
   <aurelia-slickgrid
-    grid-id="grid1"
-    column-definitions.bind="columnDefinitions"
-    dataview.bind="dataviewObj"
-    grid.bind="gridObj"
-    grid-options.bind="gridOptions"
-    dataset.bind="dataset"
-    asg-on-aurelia-grid-created.delegate="aureliaGridReady($event.detail)">
+    grid-id="grid2"
+    column-definitions.bind="columnDefinitions2"
+    grid-options.bind="gridOptions2"
+    dataset.bind="dataset2"
+    sg-on-selected-rows-changed.delegate="onGrid2SelectedRowsChanged($event.detail.eventData, $event.detail.args)">
   </aurelia-slickgrid>
 </template>
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example10.ts b/aurelia-slickgrid/src/examples/slickgrid/example10.ts
@@ -1,9 +1,8 @@
 import { autoinject, bindable } from 'aurelia-framework';
-import { AureliaGridInstance, Column, FieldType, Formatter, Formatters, GridOption } from '../../aurelia-slickgrid';
+import { Column, FieldType, Formatter, Formatters, GridOption } from '../../aurelia-slickgrid';
 
 @autoinject()
 export class Example2 {
-  @bindable() gridObj;
   title = 'Example 10: Grid with Row Selection';
   subTitle = `
     Row selection, single or multi-select (<a href="https://github.com/ghiscoding/aurelia-slickgrid/wiki/Row-Selection" target="_blank">Wiki docs</a>).
@@ -12,57 +11,74 @@ export class Example2 {
     </ul>
   `;
 
-  aureliaGrid: AureliaGridInstance;
-  columnDefinitions: Column[];
-  gridOptions: GridOption;
-  dataset: any[];
-  dataviewObj: any;
-  isMultiSelect = true;
-  selectedObjects: any[] = [];
+  columnDefinitions1: Column[];
+  columnDefinitions2: Column[];
+  gridOptions1: GridOption;
+  gridOptions2: GridOption;
+  dataset1: any[];
+  dataset2: any[];
+  selectedTitles: any[];
+  selectedTitle: 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();
-  }
-
-  detached() {
-    // unsubscrible any Slick.Event you might have used
-    // a reminder again, these are SlickGrid Event, not Event Aggregator events
-    this.gridObj.onSelectedRowsChanged.unsubscribe();
-  }
-
-  aureliaGridReady(aureliaGrid: AureliaGridInstance) {
-    this.aureliaGrid = aureliaGrid;
+    this.dataset1 = this.prepareData();
+    this.dataset2 = this.prepareData();
   }
 
   /* Define grid Options and Columns */
-  defineGrid() {
-    this.columnDefinitions = [
+  defineGrids() {
+    this.columnDefinitions1 = [
       { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string },
       { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number },
       { id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, sortable: true },
       { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.dateIso },
       { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date },
       { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark, type: FieldType.number, sortable: true }
     ];
-    this.gridOptions = {
+    this.columnDefinitions2 = [
+      { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string },
+      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number },
+      { id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, sortable: true },
+      { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.dateIso },
+      { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date },
+      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark, type: FieldType.number, sortable: true }
+    ];
+    this.gridOptions1 = {
+      autoResize: {
+        containerId: 'demo-container',
+        sidePadding: 15
+      },
+      enableAutoResize: true,
+      enableCellNavigation: false,
+      enableCheckboxSelector: true,
+      rowSelectionOptions: {
+        // True (Single Selection), False (Multiple Selections)
+        selectActiveRow: true
+      },
+    };
+    this.gridOptions2 = {
       autoResize: {
         containerId: 'demo-container',
         sidePadding: 15
       },
       enableAutoResize: true,
       enableCellNavigation: false,
       enableCheckboxSelector: true,
+      rowSelectionOptions: {
+        // True (Single Selection), False (Multiple Selections)
+        selectActiveRow: false
+      },
       preselectedRows: [0, 2]
     };
   }
 
-  getData() {
+  prepareData() {
     // mock a dataset
     const mockDataset = [];
     for (let i = 0; i < 500; i++) {
@@ -82,31 +98,26 @@ export class Example2 {
         effortDriven: (i % 5 === 0)
       };
     }
-    this.dataset = mockDataset;
+    return mockDataset;
   }
 
-  gridObjChanged(grid) {
-    this.gridObj = grid;
-
-    grid.onSelectedRowsChanged.subscribe((e, args) => {
-      if (Array.isArray(args.rows)) {
-        this.selectedObjects = args.rows.map(idx => {
-          const item = grid.getDataItem(idx);
-          return item.title || '';
-        });
-      }
-    });
+  onGrid1SelectedRowsChanged(e, args) {
+    const grid = args && args.grid;
+    if (Array.isArray(args.rows)) {
+      this.selectedTitle = args.rows.map(idx => {
+        const item = grid.getDataItem(idx);
+        return item.title || '';
+      });
+    }
   }
 
-  onChooseMultiSelectType(isMultiSelect) {
-    this.isMultiSelect = isMultiSelect;
-
-    this.gridObj.setOptions({
-      enableCellNavigation: !isMultiSelect,
-      enableCheckboxSelector: isMultiSelect
-    }); // change the grid option dynamically
-    this.aureliaGrid.gridService.setSelectedRows([]);
-
-    return true;
+  onGrid2SelectedRowsChanged(e, args) {
+    const grid = args && args.grid;
+    if (grid && Array.isArray(args.rows)) {
+      this.selectedTitles = args.rows.map(idx => {
+        const item = grid.getDataItem(idx);
+        return item.title || '';
+      });
+    }
   }
 }